CSS - Fonts

Choosing the right font has a major impact on how readers experience a website. It can give your brand a strong identity and enhance the text. It is important to choose a font that is easy to read, with the right color and text size. Finding the right font for your website is therefore a very important factor when creating a website!

Generic Font Families

There are five generic font families in CSS:

• Serif fonts have a small stroke at the edges of each letter. They create a feeling of formality and elegance.
• Sans-serif fonts have clean lines (with no small strokes attached). They create a modern and minimalist look.
• Monospace fonts - all letters have the same fixed width. They create a mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.

Difference between Serif and Sans-Serif Fonts:

Note:  On computer screens, sans-serif fonts are generally considered easier to read than serif fonts. 

Read more about Typography: Serif and Sans-Serif → 

Examples of Fonts:

Serif fonts:

• • Times New Roman
  • Georgia
  • Garamond

Sans-serif fonts:

• • Arial
  • Verdana
  • Helvetica

Monospace:

• • Courier New
  • Lucida Console
  • Monaco

Cursive:

• • Brush Script MT
  • Lucida Handwriting

Fantasy:

• • Copperplate
  • Papyrus

The CSS “font-family” Property

In CSS, we use the font-family property to specify the font of a text. The property should contain multiple font names as a "fallback" system to ensure maximum compatibility across browsers/operating systems. Start with the desired font and end with a generic family (so that the browser can select a similar font from the generic family if none of the other fonts are available). The font names should be separated by commas.

Note: If the font name consists of multiple words, it must be enclosed in quotation marks, for example: "Times New Roman".

Examples:

Do you have any further questions about this topic? Or do you need help designing your website from a professional internet agency in Munich? Then feel free to contact us!