Font Size: The property ‘font-size’
The font size is determined by the property font-size set. You can create many different units (eg pixels and percentages) to the sizes described. In this tutorial we will look at the most frequently used and most suitable units.
Examples are:
h1 (
font-size: 30px;
)
h2 (
font-size: 12cm;
)
h3 (
font-size: 120%;
)
p (
font-size: 1em;
)
There is a fundamental difference between the four above-mentioned units. ‘px’ and ‘pt’ bring the text to an absolute size, while ‘%’ and ‘em’ allows the user to specify the size to change as he or she likes. Many Internet users are disabled, older, visually impaired or ‘suffer’ from the poor quality of their monitor. To make your website accessible for everyone, you should use modifiable units, such as’% ‘or’ em ‘.
The output size of the text in Mozilla Firefox and Internet Explorer can be changed by selecting proper option from the menu. Try it now – nice gimmick don’t you think?
Combination of attributes: the property ‘font’
Using the font attribute can describe any font properties in a single attribute.
For example, imagine the following four lines of code that could change the font properties for <p>:
p (
Font-style: italic;
Font-weight: bold;
Font-size: 30px;
Font-family: arial, sans-serif;
)
If this combination is used, the code can be simplified:
p (
Font: italic bold 30px arial, sans-serif;
)
The order of the values for font property is:
[font-style] | [font-variant] | [font-weight] | [font-size] | [font-family]