HOLLA TECH - LEARN

The font-size Property
 

The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords. For example xx-small, small, medium, large, larger, etc.

The HTML: 

<p class=“small”>
   Paragraph text set to be small
</p>
<p class=“medium”>
   Paragraph text set to be medium
</p>
<p class=“large”>
   Paragraph text set to be large
</p>
<p class=“xlarge”>
   Paragraph text set to be very large
</p>

 

The CSS: 

p.small {
   font-size: small;
}
p.medium {
   font-size: medium;
} 
p.large {
   font-size: large;
}
p.xlarge {
   font-size: x-large;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
Keywords are useful if you do not want the user to be able to increase the size of the font because it will adversely affect your site’s appearance.

The font-size Property

You can also use numerical values in pixels or ems to manipulate font size.
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy, and it gives you full control over the text size.
The em size unit is another way to set the font size (em is a relative size unit). It allows all major browsers to resize the text. If you haven’t set the font size anywhere on the page, then it is the browser default size, which is 16px.

To calculate the em size, just use the following formula: em = pixels / 16
For example:

h1 {
   font-size: 20px;
}

 

h1 {

   font-size: 1.25em;
}

 

Both of the examples will produce the same result in the browser, because 20/16=1.25em.

NOTE!
Try different combinations of text size and page zooming in a variety of browsers to ensure that the text remains readable.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT