Fonts

With CSS you are given great control over the way your text is displayed. You can change the size, color, style, and more. You probably already knew how to make text bold or underlined, but did you know you could resize the size of your font using percentages?

FONT COLOUR

Although the colour of the text seems like it would be part of CSS Font, it actually is a standalone attribute in CSS. This could be for many reasons, including the fact that it will be used a great deal, so why make the coder type out "font-color", when they could just type out "color" instead? Here's an example of changing the colour of your font.

CSS Code

h4 { color: red; }
h5 { color: #9000A1; } 

How It Looks

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.

FONT FAMILY

Font family's can be divided into two groups: serif and san serif. A san serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans serif fonts are much easier to read on a computer monitor as opposed to a serif font.

CSS Code

h4 { font-family: sans-serif; }
h4 { font-family: serif; } 
h4 { font-family: arial; } 

This is a header with sans-serif font

This is a header with a serif font

This is a header with an arial font

FONT SIZE

You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value.

CSS Code

p { font-size: 120%; } 
ol{ font-size: 10px; } 
ul{ font-size: x-large; } 

This is a font size of 120%

1. This is a font size of 10px

• This is a font size of "x-large"

Though key terms are not very useful, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.

FONT STYLE

CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

CSS Code

p { font-style: italic; }
h4 { font-style: oblique; } 

How It Looks

This is Italic Font

This is h4 with oblique Font

FONT WEIGHT

If you want to control the weight of your font ( its thickness ), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100(thin)-900(thick).

CSS Code

p {font-weight:100;}
p {font-weight:900;}
p {font-weight:bolder;}

How It Looks

This is font weight 100

This is font weight 900

This is Bolder.

Available key terms for font-weight: lighter, bold, bolder, and normal.

FONT VARIANT

CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish.

p {font-variant:small-caps;}

How It Looks

This sentence was written normally. Can you see the difference.