|normal, italic, oblique
|normal, small-caps, inherit
|30px, 12pt, 20%, em
|"'Times New Roman', Arial, Calibri"
When you create a website it should be accessible to everyone. Users should be able to adjust the font size to read your text. Rememeber the visually impaired users! Font size in pixel (px) and point(pt) are fixed, whereas, the font size in em and percentage(%) can be adusted to suit your users need.
In word document 12pt is normally used, so let us compare 12pt with em,px and %.
Mobile phone websites use em.
1em is equal to 12pt.
Pixels are dots. 1 pixel is equal to 1 dot.
16px is equal to 12pt
The computer screen is in pixels.
100% is equal to 12pt.
Remember! The font size in percentage can be adjusted
This font-size is 1em
This font-size is 12pt
This font-size is 16px
This font-size is 100%
You can increase or decrease the unit to change the font size.
If you write a letter, using word document, you would stick to a particular font face such as arial. However, in a website you would need to define more than one font names in the font-family property. The reason for this is that if the browser cannot find the first font name it will look for the second name and so on. In the example below the first font the browser will look for is arial.
If the font name consists of more than one word then they should be in single or double quotation marks.
The two types of font family names are:
It is a good idea to list a number of fonts you like and include one of the generic family font at the end.
In the example below the browser looks for your first choice arial then second choice courier and finally it will pick a font from the generic family serif (Times New Roman, Bodini,Garamond).
It is important to think about users who may be dyslexic. The sans serif fonts such as arial, san comic or verdana would be suitable, and the font-size from 12pt-14pt.
The font style values we are going to look at is normal and italic. The oblique value is similar to italic.
The font-variant values we are going to look at is small-caps and normal.
small caps text
The font-weight values we are going to look at is bold and normal.
The font property lets you declare more than one font values.
<p style="font:bold 18px 'comic sans MS', serif">
The font is in bold.<br>
The font size is 10px.<br>
The font type is comic sans MS.<br>
The font is in bold.
The font size is 18px.
The font type is comic sans MS.