Setting and Styling fonts in CSS

CSS fonts

It is very important to choose right font for your website while it is under construction. It increases the readability of text on your website. CSS provides several properties for styling fonts on your website. The font CSS property sets the style, variant, boldness, height and the font family for an element’s text content. It is a shorthand property for setting the individual font properties.

The various font properties which you should know while developing website are:

  • font-family
  • font-style
  • font-weight
  • font-size
  • font-variant

setting font-family in CSS

The font-family property is used to set the font of content on your website. You can set more than one fonts in a single row separated by comma so that, if the first font is not available, the second come into action and so on.

You should end the list with a generic font family which are five  serif, sans-serif, monospace, cursive and fantasy. A typical font family declaration look like this

body{font-family:Arial, Helvetica, sans-serif;}

The most common font families used in web design are serif and sans-serif, because they are easy to read. Monospace fonts are commonly used to display code, because each letter takes up the same space which looks like typewritten text in monospace.

The cursive fonts look like cursive writing or handwriting. The fantasy font represents artistic font, but they’re not used widely because of poor availability across the operating systems.

setting font-style in CSS

The font-style property is used to set the style of the font on your website. The CSS provides various font style properties like normal, italic and oblique. Let us write a code to understand style of font in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#one{
            font-style: normal;
            font-size: 15px;           
        }
        p#two{
            font-style:italic;
            font-size: 15px;              
        }  
        p#three{
            font-style:oblique;  
            font-size: 15px;          
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Normal font style</h3>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Italic font style</h3>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Oblique font style</h3>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>
setting font-style in CSS, www.programmingtutorial.in

It should be noted that italic style and oblique looks same but there is a difference, the italic style font uses italic version and the oblique on the other hand is slanted version of normal font.

setting font-weight in CSS

The font-weight specifies the weight or thickness of font on your page. This property can take any one of the values: lighter, normal, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.

400 works in a similar way as normal and 700 works as bold. The values starting from 100 to 900 specifies font weight in which it changes font weight as the value increases. Let us understand it with an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid red;
            width:25%;
            padding:5px;
        }
        p#normal{
            font-weight: normal;                    
        }
        p#bold{
            font-weight: bold;                       
        }  
        p#lighter{
            font-weight: lighter;              
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Normal font weight</h3>
        <p id="normal">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>Bold font weight</h3>
        <p id="bold">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>Bolder font weight</h3>
        <p id="lighter">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>
setting font-weight in CSS

Setting font-size in CSS

The font-size property is used to set the size of the font. You can set font-size with different types of properties like in pixels, in percentage, keywords and em etc.

Setting font in pixels

If you require an accuracy of pixel level then set font size in terms of pixels. It can be 16px, 20px or whatever you provide in your code.

h2{ font-size:16px;}
p{font-size:20px;}

Setting font size in em

The em unit is directly related to the font size of the parent element. When defining the font-size property, 1em is equal to the size of the font that applies to the parent of the element. Let us set font size of body as 25px, then 1em will be equal to 25px and 2em will be equal to 50px.

However, if you haven’t set the font size anywhere on the page, then the browser takes a default value as 16px. Therefore, by default 1em = 16px, and 2em = 32px. Let us write a code to better understand font-size in em units.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        body{
            font-size:10px;
        }
        p#oneem{
            font-size:1em;                    
        }
        p#twoem{
            font-size:2em;                       
        }  
        p#threeem{
            font-size:3em;              
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>1em font size</h3>
        <p id="oneem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, dolores?
        </p>
        <h3>2em font size</h3>
        <p id="twoem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, doloremque?
        </p>
        <h3>3em font size</h3>
        <p id="threeem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, facere?
        </p>
    </div>   
</body>
</html>

In above code, the body font is set as 10px which is inherited further as 1em, 2em and 3em. Here 1em is 10px, 2em is 20px and 3em is 30px.

Setting font-size with keyword

CSS provides different keywords to set font-size. These keywords are xx-small, x-small, small, large, x-large, xx-large. Let us write a code to better understand these properties.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        body{
            font-size:10px;
        }
        p#xx-small{
            font-size:xx-small;                    
        }
        p#x-small{
            font-size:x-small;                       
        }  
        p#small{
            font-size:small;              
        }  
        p#large{
            font-size:large;              
        }   
        p#x-large{
            font-size:x-large;              
        }   
        p#xx-large{
            font-size:xx-large;              
        }    
    </style>
</head>
<body>
    <div class="container">
        <h3>xx-small font size</h3>
        <p id="xx-small">
            Lorem ipsum dolor sit amet.
        </p>
        <h3>x-small font size</h3>
        <p id="x-small">
            Lorem ipsum dolor sit amet.
        </p>
        <h3>small font size</h3>
        <p id="small">
            Lorem ipsum dolor sit amet.
        </p>
        <h3>large font size</h3>
        <p id="large">
            Lorem ipsum dolor sit amet.
        </p>
        <h3>x-large font size</h3>
        <p id="x-large">
            Lorem ipsum dolor sit amet.
        </p>
        <h3>xx-large font size</h3>
        <p id="xx-large">
            Lorem ipsum dolor sit amet.
        </p>
    </div>   
</body>
</html>
Setting font-size with keyword

Setting font-size with viewport

The font size can also be set with the help of viewport height (vh) and viewport width (vw). Viewport units refer to the percentage of the browser’s view. 1 vw=1% of viewport width of browser and 1 vh=1% of viewport height of browser. If the viewport height of browser is 1000px, then 1vh=10px.

body{
      font-size:1vh;}