CSS: Specifying font size

This entry is part 11 of 26 in the series Basic CSS

There are few ways to specify the font size.  We look at 2 common methods.

We can specify the absolute size using pixels(px).  An average size for text is 10px.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font-size</title>
    <style type='text/css'>
        p {
            font-size: 16px;
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>

We can also specify relative sizing as a multiplier of the base font.  For example, 2em is two times the base size or 200%.

It is called an em because it is the width of the capital M character.

The example below uses 1.2em or 120% of the base font.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font-size</title>
    <style type='text/css'>
        p {
            font-size: 1.2em;
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>

 

 

Series Navigation<< CSS: Specifying a font family
CSS: Applying bold and italics >>