Styling Fonts With CSS

This tutorial will show you the basics of styling fonts. The results will look like this: Font Style Demonstration

To start with we need to decide what we want to do with our fonts. There are multiple CSS values that can be applied to a font, for example:

  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

Each of the above font properties have their own bespoke values. If we don't style our fonts then UA default settings will be applied.

HTML code that will be styled

<h1>Headline 1 Colour &amp; Size</h1> <h2>Headline 2 Colour &amp; Size</h2> <h3>Headline 3 Colour &amp; Size</h3> <h4>Headline 4 Colour &amp; Size</h4> <h5>Headline 5 Colour &amp; Size</h5> <h6>Headline 6 Colour &amp; Size</h6> <p>Enimnunc et habitur mollisi sagittis velit a eu famet leo in. Habitaemauris non wisi sit dolorem laoreet ac semper nam nunc sapientum. Malesuadatellus estique accum cum convallicitur id quis habituris cursus congue loreet.</p> <blockquote>Enimnunc et habitur mollisi sagittis velit a eu famet leo in. Habitaemauris non wisi sit dolorem laoreet ac semper nam nunc sapientum. Malesuadatellus estique accum cum convallicitur id quis habituris cursus congue loreet.</blockquote> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> </ul>

The HTML code uses standards conform mark-up.

The required CSS code

body{ font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background-color:#FFFFFF; } h1{font-size:1.5em;} h2{font-size:1.2em; color:#333333;} h3{font-size:1em; color:#666666;} h4{font-size:.9em; color:#999999;} h5{font-size:.8em; color:#CCCCCC;} h6{font-size:.7em; color:#666600;} p{ font-size:.8em; font-weight:bold; } blockquote{ font-size:.8em; padding-top:5px; padding-right:5px; padding-bottom:5px; padding-left:5px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:#999999; border-right-color:#999999; border-bottom-color:#999999; border-left-color:#999999; background-color:#DEDEDE; } ul{ font-size:.8em; font-variant:small-caps; }

To start we set the default settings, telling the "body" to set the font size to 100%. Setting font size to "100%" means that we set the font to 100% of the UA settings. If the UA has a setting of 13pixel as default then our body will set the text to 100% of 13pixel.

A Font Size Demonstration has been created to view the different types of font size structures "px, %, em, pt".

We now decide what font we want to use - in this case we have used one of the most supported web fonts "Verdana". In our CSS there are multiple fonts shown in one line - this is for a reason. If the person viewing your webpage doesnt have "Verdana" installed then "Arial" will be selected, this carrys on until a font is found to be installed. If all else fails then a standard "sans-serif" font will be selected.

Now we set the general font and background colours - please note that colour is written using the American style: "color".

It is always good practice to define a default background color, there are a couple of reasons:

  1. If background images are being used and are not shown then the default UA background colour will be shown.
  2. The background colour of the UA may be set to a colour that you dont want to show.

Now we set the individual elements that require formatting:

  • Headline 1 to 6
  • Paragraphs
  • Blockquotes
  • Unordered lists

Initially all of the elements use the standard size and colour set in the "body". Because we don't want everything to look exactly the same we create a tag in the CSS for the individual elements.

The headlines have been given their own bespoke colours and sizes, the "p, blockquote, ul" have all the same font size. The "p" tag has been told to render in "bold", the "ul"(list) renders using "small-caps" and for this tutorial we have given the "blockquote" a border, a background colour and padding to enhance the block.

Shorthand CSS code

body{ font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background-color:#FFFFFF; } h1{font-size:1.5em;} h2{font-size:1.2em; color:#333333;} h3{font-size:1em; color:#666666;} h4{font-size:.9em; color:#999999;} h5{font-size:.8em; color:#CCCCCC;} h6{font-size:.7em; color:#666600;} p, blockquote, ul{ font-size:.8em; } p{ font-weight:bold; } blockquote{ padding:5px; border:1px solid #999999; background-color:#DEDEDE; } ul{ font-variant:small-caps; }

The shorthand version of the CSS code should be used where possible. Keeping styling code down to a minimum helps with both page load speed and in the long term when de-bugging code.

In this version you can see that we have cut down the "blockquote" border properties & padding properties. We have also combined the "p, blockquote, ul" tags to share the ".8em" font size.