Sans-Serif vs Serif Fonts

Choosing the right font for your website is so important when you’re trying to deliver your message in a clear and effective way.

Did you know that all fonts are broken down into two different categories? Those categories are Serif and Sans-Serif. The difference between the two is very simple: A Serif is a small line attached to the end of a stroke in a letter or symbol. For fonts without a small line attached to the end are called Sans-Serif. The word “Sans” originates from the French language, which means without.  

Fonts for Digital Media

Sans-Serif fonts are considered to be one of the most legible fonts on computer screens. Because of the constraints of screen resolution, the Serifs in some fonts can make text difficult to read on screen. For example, the San-Serif font used in this blog is Arial.

Sans-Serif examples: Arial, Verdana, Tahoma

Best used on: Websites, emails and smart devices

Web Safe Fonts

Whenever building a site especially your first site its very tempting to head over to your favorite font library and just go nuts. This is a exercise in futility though as almost 99% of those font cant display on the world wide web. Fear not intrepid young developer here is a list of the current fonts (many of them actually aesthetically pleasing) that are completely web safe.

Using Fonts on the Web

It’s fun to go through all of the fonts on your computer and use them on your Region website. However, keep in mind thatnot everyone will have your fun font on their computer. So, it’s a good idea to use fonts that the majority of people will have and can view. You should also have a back-up font declared so that everyone can see your Region website the way it was meant to be seen..

Declaring Your Fonts

You can declare your fonts in CSS. Follow the format below:

font-family: Geneva, Arial, sans-serif;

You can add as many fonts to your declaration as you like. The first font is what will be displayed. Each font listed after that will be the fallback if the first font doesn’t work. So, say the user doesn’t have Geneva on their computer. It will try to display the page in Arial. If they don’t have Arial either, it will use the basic sans-serif font on the computer’s system.

Common Web Fonts

Choosing a font can be difficult because users work on different types of computers. Macs and Linux have different fonts than regular PCs, so even if your font is a "normal" font on a Mac, it might not be visible for a user on a PC. Here is a list of fonts that render on all computer formats: