THE FONTS IN THE CASCADE STYLE SHEETS

CSS FONTS

Before introducing the topic “THE FONTS IN THE CASCADE STYLE SHEETS” let’s say that choosing the right font has a huge impact on how readers experience a website. The right font can create a strong identity for your brand. It is important to use an easy-to-read font. The font adds value to the text. It is also important to choose the correct color and size of the text for the font.

GENERIC FONT FAMILIES

There are five generic font families in CSS FONTS:

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalist look.
Monospace fonts: Here all letters have the same fixed width. They create a mechanical look.
Italic fonts mimic human writing.
Fantasy fonts are decorative / playful fonts.

All the different font names belong to one of the generic font families.

PROPERTY FONT FAMILY

In CSS, the font-family property is used to specify the font of a text.

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

Tip: The font-family property should contain different font names as a “fallback” system, to ensure maximum compatibility between browsers / operating systems. It starts with the font you want and ends with a generic family (to allow the browser to choose a similar font in the generic family, if no other fonts are available).

WEB SAFE CHARACTERS

Web safe fonts are fonts installed universally on all browsers and devices. However, there are no completely 100% web safe fonts. There is always the possibility that a font may not be found or is not installed correctly. Therefore, it is very important to always use fallback characters. This means that you should add a list of similar “backup fonts” in the font family property. If the first character doesn’t work, the browser will try the next one, the next one again, and so on. Always ends the list with a generic font family name.

p {
font-family: Tahoma, Verdana, sans-serif;
}

The following list represents the best safe fonts for the web, HTML and CSS:

Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Here are some commonly used font fallbacks, organized by five generic font families:

Serif
Sans-serif
Monospace
Cursive
Fantasy

FONT STYLE

The font-style property is mainly used to specify italicized text.

This property has three values:

normal – The text is displayed normally
italic – The text is shown in italics
oblique – Text is “hanging” (oblique is very similar to italics, but less supported)

FONT WEIGHT

the font-weight property specifies the weight of a font:

p.thick {
font-weight: bold;
}

FONT VARIANT

The font-variant property specifies whether a text should be displayed in small caps or not. In a small caps character, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters are displayed with a smaller font size than the original uppercase letters in the text.

Being able to manage the size of the text is important in web design. However, you shouldn’t use font size settings to make paragraphs look like headings or titles like paragraphs. Always use appropriate HTML tags, such as <h1> – <h6> for headings and <p> for paragraphs. The font size value can be absolute or relative.

Absolute size:

Set the text to a specified size
Doesn’t allow a user to change the text size in all browsers (bad for accessibility reasons)
The absolute size is useful when you know the physical size of the output

Relative size:

Sets the size relative to the surrounding elements
Allows a user to change the text size in browsers

SETTING IN PIXEL

Setting the text size with pixels gives you full control over the text size:

p {
font-size: 14px;
}

Tip: If you’re using pixels, you can still use the zoom tool to resize the entire page.

SETTING IN EM

To allow users to resize text (in the browser menu), many developers use ems instead of pixels. 1em is equal to the current font size. The default text size in browsers is 16 px. Hence, the default size of 1em is 16px. The size can be calculated from pixel to em using this formula: pixel/16 = em

h1 {
font-size: 2.5em; / * 40px / 16 = 2.5em * /
}

RESPONSIVE FONT SIZE

The text size can be set with a unit vw, which means “window width”. In this way the size of the text will follow the size of the browser window:

<h1 style = “font-size: 10vw”> Hello World </h1>

Viewport is the size of the browser window. 1vw = 1% of the window width. If the window is 50cm wide, 1vw is 0.5cm.

FONT PROPERTIES

To abbreviate the code, you can also specify all the properties of the individual characters in a property. The font property is a shorthand property for:

font-style
font-variant
font-weight
font-size/line-height
font-family

Note: The font-size and font-family values are required. If any of the other values are missing, the default value is used.

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
    h1.a {
      font-family: "Audiowide", sans-serif;
    }
                                    
    h1.b {
      font-family: "Sofia", sans-serif;
    }
                                    
    h1.c {
      font-family: "Trirong", serif;
    }
    p.d {
       font-family: "Audiowide", sans-serif;
       font-size: 16px;
    }
    p.e {
      font-family: "Trirong", serif;
      font-size: 16px;
   }
    </style>
    </head>
    <body>                              
        <h1 class="a">Audiowide Font</h1>                              
        <h1 class="b">Sofia Font</h1>                             
        <h1 class="c">Trirong Font</h1>  
        <p class="d">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          Velit, hic. Saepe optio asperiores hic nam vero adipisci alias id 
          earum velit! Omnis vel beatae inventore accusantium minus? Rem, 
          quam reiciendis!
        </p>
        <p class="e">Aspernatur, vero? Laborum non placeat soluta. Fugit est 
          adipisci quis quas velit sunt, atque aperiam vel maiores 
          reprehenderit, fuga sint. Soluta id iusto amet sequi! 
          Est ea nam maxime autem?
        </p>                           
    </body>
    </html>

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB