Fonts

Property Value
Font-style normal, italic, oblique
Font-variant normal, small-caps, inherit
Font-weight bold, normal
Font-size 30px, 12pt, 20%, em
Font-Family "'Times New Roman', Arial, Calibri"


Font Size

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 %.

em

Mobile phone websites use em.
1em is equal to 12pt.

Pixel(px)

Pixels are dots. 1 pixel is equal to 1 dot.

16px is equal to 12pt

The computer screen is in pixels.

Percentage(%)

100% is equal to 12pt.
Remember! The font size in percentage can be adjusted


<head>
<style>
#p1{font-size:1em;}
#p2{font-size: 12pt;}
#p3{font-size:16px;}
#p4{font-size: 100%;}
</style>
</head>
<body>
<p id="p1"> This is font-size 1em</p>
<p id="p2"> This is font-size 12pt</p>
<p id="p3"> This is font-size 16px</p>
<p id="p4"> This is font-size 100%</p>
</body>

Displays

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.


Font-Family

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.


Example

p{font-family: arial,verdana,"Times New Roman",Serif;}


If the font name consists of more than one word then they should be in single or double quotation marks.

Example

p{font-family:"Times New Roman","Lucinda Sans";}


Font-Family Names

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).


Example

p{font-family:arial,courier,serif;}

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.


Font-Style

The font style values we are going to look at is normal and italic. The oblique value is similar to italic.


<head>
<style>
h2 {font-style: italic;}
h3 {font-style: normal;}
<head>
<style>

<body>
<h2> This is Heading 2</p>
<h2> This is Heading 3</p>
</body>

Displays

This is Heading 2

This is Heading 3




Font Variant

The font-variant values we are going to look at is small-caps and normal.

<head>
<style>
#para1 {font-variant: normal;}
#para2 {font-variant: small-caps;}
<head>
<style>

<body>
<p id="para1">norma text</p>
<p id="para2">small caps text </p>
</body>

Displays

normal text

small caps text




Font Weight

The font-weight values we are going to look at is bold and normal.

<head>
<style>
#norm {font-weight: normal;}
#bold {font-weight: bold;}
<head>
<style>

<body>
<p id="norm">normal text</p>
<p id="bold" >bold text</p> </body>

Displays

normal text

bold text




Font Declaration

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>
</p>


Displays

The font is in bold.
The font size is 18px.
The font type is comic sans MS.






Now do the Exercise!