Changing font style and size with CSS

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In this tutorial we will look at how to change font styles on a web page using CSS code in an external stylesheet. We will look at how to change the font-weight (eg. normal or bold), font-style (eg. normal or italic), font-size (eg. 12pt, 10px, 1em or 100%), font-family (eg. Arial or Tahoma), font-variant (eg. normal or small-caps), and the line-height properties. We will also look at how to add comments to our CSS code.

There are two ways that we can change the values for different font properties:

  • On multiple lines

  • On one line

When we specify the font properties over multiple lines, it will look like this:

When we specify the font properties on one line it looks like this (note that there are required property values and some order to the values – watch the video to find out more):

Watch the video below and then scroll down to find out more about web-friendly fonts and to see the sample code.

The sample code below is for a CSS file with the font property values specified on multiple lines:

p{
 font-family: Georgia;
 font-weight: bold;
 font-style: italic;
 font-size: 1em;
}

Here is the code for a CSS file with the font property values specified on one line – much neater, right? This is in the order of font-style, font-weight, font-size, and font-family.

p{
 font: italic bold 1em Georgia;
}

Full example

Here is the full HTML and CSS code. the HTML file references an external stylesheet called theme.css which contains the CSS code:

You can also try out line-height to space each line apart. This works with units such as em, % and px:

p{
    font: italic bold 1em Georgia;
    line-height: 2em;
}

Font-size units:

It is important to have an understanding of the four different units for the font-size property. The four different units are:

  • em – the em is scalable and is used in web documents. An em is equal to the current font-size of the web document. For example, if the document size is 12pt, then 1em will be equal to 12pt. 2em would therefore be equal to 24pt. You can also use decimals eg. 1.5 em. Ems are popular on the web because they are mobile-friendly and are used in ‘responsive’ web design.

  • px – Pixels (px) are fixed-size units that are designed for media that will be read on a screen. 1 pixel is the equivalent of one dot on the computer screen. The downside of pixels is that they do not scale to fit mobile devices or screen readers for the visually impaired.

  • pt – Points (pt) are usually used for print media and are also fixed-size units that cannot scale to fit mobile devices. 1 pt = 1/72 of an inch.

  • % – Percent (%) unit is like the em unit as it is also scalable. Eg. the current font size of 12pt = 100%.

In summary, the em and % units are really what you want to use for the font-size property, especially if you wish to develop mobile-friendly or responsive websites.  Stay away from px and pt as they do not scale for mobile devices. Try getting used to using em and % instead. Find out more information on font-size units here.

And lastly, here is an overview of some of the web-safe fonts that you can include in CSS:

Serif fonts:

  • Georgia, serif

  • Palatino Linotype

  • Book Antiqua

  • Palatino, serif

  • Times New Roman

Sans-serif fonts:

  • Arial

  • Helvetica, sans-serif

  • Arial Black

  • Gadget sans-serif

  • Comic Sans MS

  • Impact

  • Charcoal

  • Lucida Sans Unicode

  • Tahoma

  • Geneva

  • Trebuchet MS

  • Verdana

Monospace fonts:

  • Courier New

  • Courier, monospace

  • Lucida Console

  • Monaco, monospace

Next lesson: Using custom fonts (with the @face rule)