Skip to main content

A Beginner's Guide to CSS | Part Eight - CSS Font and Text Properties

Submitted by helen on Wednesday, July 21, 2010 - 22:09; Modified on Thursday, August 25, 2016 - 15:34

In this instalment of the A Beginner's Guide to CSS series, titled CSS Font and Text Properties, we will be discussing how to format text using CSS.

This tutorial is split into nine parts:

How to change the size of text

The font-size property is used to specify a font size, using the units of measurement discussed in the last chapter, as well as some special font units, described below.

Example

CSS Code:


p.percentExample {
  font-size:130%
}

p.pixelExample {
  font-size:15px;
}

p.emExample {
  font-size:1.3em;
}

(X)HTML Code:


<p class="percentExample">Percent</p>
<p class="pixelExample">Pixel</p>
<p class="emExample">Em</p>

Result:

Percent

Pixel

Em

CSS font units of measurement

In the last instalment, we discussed the CSS units of measurement, but we didn't talk about some extra font units. These extra units fit into two categories: absolute and relative.

Absolute Sizes

The absolute sizes do not depend on an inherited value, i.e., a value set on a parent or ancestor element. They are identifiers stored by the browser and represent font sizes, that may vary per browser.

CSS Code:

p.xxSmallExample {
  font-size:xx-small;
}

p.xSmallExample {
  font-size:x-small;
}

p.smallExample {
  font-size:small;
}

p.mediumExample {
  font-size:medium;
}

p.largeExample {
  font-size:large;
}

p.xLargeExample {
  font-size:x-large;
}

p.xxLargeExample {
  font-size:xx-large;
}

(X)HTML Code:

<p class="xxSmallExample">xx-small - extra, extra small font</p>
<p class="xSmallExample">x-small - extra small font</p>
<p class="smallExample">small - small font</p>
<p class="mediumExample">medium - medium font (this is the default font size set in the browser)</p>
<p class="largeExample">large - large font</p>
<p class="xLargeExample">x-large - extra large font</p>
<p class="xxLargeExample">xx-large - extra, extra large font</p>

Result:

xx-small - extra, extra small font

x-small - extra small font

small - small font

medium - medium font (this is the default font size set in the browser)

large - large font

x-large - extra large font

xx-large - extra, extra large font

Relative Sizes

The relative sizes depend on the font size set in a parent or ancestor element, and render differently in various browsers.

CSS Code:

p.smallerExample {
  font-size:smaller;
}

p.largerExample {
  font-size:larger;
}

(X)HTML Code:

<p class="smallerExample">smaller - sets the font to a smaller size than the current font size for that element; the factor that the size decreases by varies per browser.</p>
<p class="largerExample">larger - sets the font to a larger size than the current font size for that element; the factor that the size increases by varies per browser.</p>

Result:

smaller - sets the font to a smaller size than the current font size for that element; the factor that the size decreases by varies per browser.

larger - sets the font to a larger size than the current font size for that element; the factor that the size increases by varies per browser.

The relative sizes are generally best avoided as they produce inconsistent results across different browsers.

Which unit of measurement should I use for my fonts?

The units of measurement generally recommended are em, percent and pixel as these all resize well (actually, pixels don't resize in versions of IE below 8, but, really, who cares about this now that IE6 is no longer supported). The units of measurement to avoid are centimetres, millimetres, inches, picas and points because they produce inconsistent results and aren't intended for web page design.

How to set the font family of text

The property font-family specifies a font family for your text, in the format of a comma delimited list. font-family can either be a font family name, such as Arial or one of five generic font families:

  • cursive - a font which mimics joined up hand-writing
  • fantasy - an extravagant font
  • monospace - a font whose letters and characters each occupy the same amount of horizontal space
  • sans-serif - a font without a serif
  • serif - a font with a serif

The generic font family always comes at the end of the list and must not be quoted. It is also recommended to quote font family names when they contain spaces, digits or special characters, for instance "Bell MT" instead of Bell MT.

Example

Here, we are specifying the font name by itself.

CSS Code:


p {
  font-family:Arial;
}

Here, we are specifying the font family.

CSS Code:


p {
  font-family:Arial, Helvetica, sans-serif;
}

The fonts

Below is a list of browser safe fonts — fonts that most people will have installed on their computers, whether they are using PC or Mac.

CSS Code:


p.comicSansExample {
  font-family:"Comic Sans MS", cursive;
}

p.courierExample {
  font-family:"Courier New", Courier, monospace;
}

p.lucidiaMonospaceExample {
  font-family:"Lucida Console", Monaco, monospace;
}

p.verdanaExample {
  font-family:Verdana, Geneva, sans-serif;
}

p.arialExample {
  font-family:Arial, Helvetica, sans-serif;
}

p.tahomaExample {
  font-family:Tahoma, Geneva, sans-serif;
}

p.arialBlackExample {
  font-family:"Arial Black", Gadget, sans-serif;
}

p.lucidiaSansUnicodeExample {
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

p.georgiaExample {
  font-family:Georgia, "Times New Roman", Times, serif;
}

p.timesExample {
  font-family:"Times New Roman", Times, serif;
}

p.palatinoExample {
  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

p.MSSerifExample {
  font-family:"MS Serif", "New York", serif;
}

(X)HTML Code:


<p class="comicSansExample">"Comic Sans MS", cursive</p>
<p class="courierExample">"Courier New", Courier, monospace</p>
<p class="lucidiaMonospaceExample">"Lucida Console", Monaco, monospace</p>
<p class="verdanaExample">Verdana, Geneva, sans-serif</p>
<p class="arialExample">Arial, Helvetica, sans-serif</p>
<p class="tahomaExample">Tahoma, Geneva, sans-serif</p>
<p class="arialBlackExample">"Arial Black", Gadget, sans-serif</p>
<p class="lucidiaSansUnicodeExample">"Lucida Sans Unicode", "Lucida Grande", sans-serif</p>
<p class="georgiaExample">Georgia, "Times New Roman", Times, serif</p>
<p class="timesExample">"Times New Roman", Times, serif</p>
<p class="lucidiaExample">"Palatino Linotype", "Book Antiqua", Palatino, serif</p>
<p class="MSSerifExample">"MS Serif", "New York", serif</p> 

Result:

"Comic Sans MS", cursive

"Courier New", Courier, monospace

"Lucida Console", Monaco, monospace

Verdana, Geneva, sans-serif

Arial, Helvetica, sans-serif

Tahoma, Geneva, sans-serif

"Arial Black", Gadget, sans-serif

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Georgia, "Times New Roman", Times, serif

"Times New Roman", Times, serif

"Palatino Linotype", "Book Antiqua", Palatino, serif

"MS Serif", "New York", serif

What's the difference between serif and sans-serif?

A serif is the short line added to the top and bottom of characters in certain typographies, like Times Roman, Palatino and Book Antiqua. A sans-serif font is a font without that little typeface detail, such as Arial, Verdana and Lucidia. Sans is the French word for without, sans-serif literally meaning, without the serif.

An example of a serif font - Times New Roman An example of a sans=serif font - Arial

On the left is the serif font Times New Roman, with the serifs highlighted in red. On the right is the sans-serif font Arial.

How to make text bold

The property font-weight is used to make text bold, by choosing from the weights available for a given font family. For instance, the Verdana font has four faces (Regular, Italic, Bold and Bold Italic), only two of which are bold (Bold and Bold Italic). To make text bold, the font you are using must have one or more bold faces. Most fonts contain the Bold and Normal/Regular faces, so, typically you would specify a font-weight of bold, to make text bold and a font-weight of normal to make text normal thickness.

There are two other intermediary values called lighter and bolder, which will render text in a lighter or bolder thickness, respectively. These depend on the current thickness of the font and whether or not a lighter or thicker font face exists for the font in question.

Using bold, normal, lighter and bolder

CSS Code:


p.boldExample {
  font-weight:bold; 
}

p.bolderExample {
  font-weight:bolder; 
}

p.normalWeightExample {
  font-weight:normal;
}

p.lighterExample {
  font-weight:lighter;
}

(X)HTML Code:


<p class=boldExample">This text is bold.</p>
<p class=bolderExample">This text is bolder.</p>
<p class="normalWeightExample">This text is normal.</p>
<p class="lighterExample">This text is lighter.</p>

Result:

This text is bold.

This text is bolder.

This text is normal.

This text is lighter.

The numerical scale of boldness

It is possible to specify a number that corresponds to the boldness of text, from a predefined scale of thickness. The values we used above of bold and normal sit on this scale, along with several others, which are listed blow, from lightest to thickest:

  • 100 - Thin
  • 200 - Extra Light (Ultra Light)
  • 300 - Light
  • 400 - Normal
  • 500 - Medium
  • 600 - Semi Bold (Demi Bold)
  • 700 - Bold
  • 800 - Extra Bold (Ultra Bold)
  • 900 - Black (Heavy)

The identifiers above correspond to a particular font style. For example, the Calibri font utilises Bold and Light but not any of the other thicknesses. In this instance, if I were to use Black or 900 with Calibri, it would default to a bold, as that is the closest approximation.

How to make text italic and oblique

In general, when you make text italic or oblique, CSS isn't actually manipulating the text: it's switching out your font face for one from the same family, that is italic or oblique (a similar process to when text is made bold using the font-weight property). This is accomplished using the font-style property, which will also revert text back to the regular font face.

Making text italic, oblique, then turning it back to normal

Here, we use the font-style properties of italic and oblique to render text as italic and oblique. We then used the property normal to turn it back into normal text.

CSS Code:


p.italicExample {
  font-style:italic;
}

p.obliqueExample {
  font-style:oblique;
}

p.normalStyleExample {
 font-style:normal;
}

It is worth noting that, should no italicised version of your font exist, an oblique version will be selected, and vice-versa.

(X)HTML Code:


<p class="italicExample">This text is italic.</p>
<p class="obliqueExample">This text is oblique.</p>
<p class="normalStyleExample">This text is normal.</p>

Result:

This text is italic.

This text is oblique.

This text is normal.

How to change the colour of text

The property color (spelt the American way) is used to apply colour to text. It accepts the following values:

  • name values, such as red, orange.
  • hex values, which are written either with six characters (longhand) or three (shorthand), such as #000000, or #000 (which represents the colour black).
  • rgb values, such as rgb(255,0,0) (which represents the colour red).

Example of how to apply colour to text

CSS Code:


p.colourNameExample {
  color:red;
}

p.shorthandHexExample {
  color:#939;
}

p.longhandHexExample {
  color:#1372bb;
}

p.rgbValueExample {
  color:rgb(252,164,10);
}

(X)HTML Code:


<p class="colourNameExample">This text is red.</p>
<p class="shorthandHexExample">This text is purple.</p>
<p class="longhandHexExample">This text is blue.</p>
<p class="rgbValueExample">This text is orange.</p>

Result:

This text is red.

This text is purple.

This text is blue.

This text is orange.

How to align text

The property text-align is used to align text. It has five properties, center, inherit, justify, left and right.

  • center aligns text to the centre.
  • inherit sets the text alignment to whatever is set on the parent element, or an ancestor element. This doesn't work in versions of IE below 8.
  • justify gives text a justified alignment.
  • left aligns text to the left.
  • right aligns text to the right.

Example

CSS Code:


div.centerExample {
  text-align:center;
}

div.justifyExample {
  text-align:justify;
}

div.leftExample {
  text-align:left;
}

div.rightExample {
  text-align:right;
}

(X)HTML Code:


<div class="centerExample">
<p>This is a demonstration of centre aligned text.</p>
<p>A couple of paragraphs have been inserted so you can see how it works.</p>
</div>

<div class="justifyExample">
<p>This is a demonstration of text with a justified alignment.</p>
<p>A couple of paragraphs have been inserted so you can see how it works.</p>
</div>

<div class="leftExample">
<p>This is left aligned text.</p>
<p>A couple of paragraphs have been inserted so you can see how it works.</p>
</div>

<div class="rightExample">
<p>This is right aligned text.</p>
<p>A couple of paragraphs have been inserted so you can see how it works.</p>
</div>

Result:

This is a demonstration of centre aligned text.

A couple of paragraphs have been inserted so you can see how it works.

This is a demonstration of text with a justified alignment.

A couple of paragraphs have been inserted so you can see how it works.

This is left aligned text.

A couple of paragraphs have been inserted so you can see how it works.

This is right aligned text.

A couple of paragraphs have been inserted so you can see how it works.

How to change the case of text

The property text-transform is used to capitalise the first letter of every word, transform all text to uppercase or lowercase, and revert the text back to its original formatting. The properties to do this are as follows:

  • capitalise capitalises the first letter of every word.
  • inherit sets the text transform to whatever it is set to on the parent element, or an ancestor element. This doesn't work in versions of IE below 8.
  • lowercase transform the text into lowercase characters.
  • none reverts the text back to its original formatting.
  • uppercase transforms the text into uppercase characters.

The various text-transform properties at play


p.capitaliseExample {
  text-transform:capitalize; 
}

p.lowercaseExample {
  text-transform:lowercase;
}

p.noTransformExample {
  text-transform:none;
}		

p.uppercaseExample {
  text-transform:uppercase;
}

(X)HTML Code:


<p class="capitaliseExample">This text is capitalised.</p>
<p class="lowercaseExample">This text is in lowercase.</p>
<p class="noTransformExample">This text is in its original formatting.</p>
<p class="uppercaseExample">This text is in uppercase.</p>

Result:

This text is capitalised.

This text is in lowercase.

This text is in its original formatting.

This text is in uppercase.

How to convert text to small-caps

The font-variant property is used to convert lowercase letters to small uppercase letters, via the small-caps value. This will render your text in a smaller font, with the previously lowercase letters now uppercase, but slightly smaller than the original uppercase letters. The normal value restores the original font variant.

Example

CSS Code:



p.smallCapsExample {
  font-variant:small-caps;
}

(X)HTML Code:


<p class="smallCapsExample">This paragraph is written in lowercase, with the first letter of each sentence capitalised. As you can see, small-caps has converted the lowercase letters into uppercase, but they are not as big as the original uppercase letters at the beginning of each sentence.</p>

Result:

This paragraph is written in lowercase, with the first letter of each sentence capitalised. As you can see, small-caps has converted the lowercase letters into uppercase, but they are not as big as the original uppercase letters at the beginning of each sentence.

How to stretch font

When a font family consists of font faces of varying widths, such as normal, condensed, light, heavy, etc, it is possible to explicitly select one of these font faces to use, instead of the regular font face. This results in either narrower or wider text, depending on the variant used and is accomplishable using the font-stretch property.

The options to chose from are as follows:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

CSS Code:


p.stretchExample {
  font-family:"Bodoni MT";
  font-size:140%; 
  font-stretch:condensed;
}

(X)HTML Example

<p> class="stretchExample">This is Bodoni MT Condensed and looks narrow.</p>

Result:

This selects the Condensed variant of Bodoni MT, which is called Bodoni MT Condensed.

You may find that the font family you have chosen doesn't contain all of the above faces. In this case, you will either need to pick one of the family's faces that does match or you can specify a face and the browser will find the closest match. Take the Bodoni MT font that most of you will have installed on your system. It contains the following styles: Black, Black Italic, Bold, Condensed, Condensed Bold, Condensed Bold Italic, Condensed Italic, italic, Regular. Out of these, only two map to font-stretch values Condensed and Regular. The font-stretch values that these map to are highlighted below:

  • ultra-condensed, extra-condensed, condensed, semi-condensed - Condensed
  • normal, semi-expanded, expanded, extra-expanded, ultra-expanded - Regular

How to combine font style, variant, weight, stretch, size and family

Most of the font properties mentioned on this page can be applied all in one go, using the font property. This saves you having to write each rule out separately, and is the preferred method for handling multiple formatting of font.

The font property takes the following values, in the order listed below:

Example

CSS Code:


p.fontSizeFamilyExample {
  font:120% "Times New Roman", Times, serif;
}

p.fontWeightSizeFamilyExample {
  font:bold 110% "Lucida Console", Monaco, monospace;
}

p.everythingExample {
  font:italic small-caps bold 100% Georgia, "Times New Roman", Times, serif;
}

(X)HTML Code:


<p class="fontSizeFamilyExample">This text is 120% in size and Times New Roman.</p>
<p class="fontWeightSizeFamilyExample">This text is bold, 110% in size, and Lucidia.</p>
<p class="everythingExample">This text is italic, in small-caps, bold, 100% in size, and Georgia.</p>

Result:

This text is 120% in size and Times New Roman.

This text is bold, 110% in size, and Lucidia.

This text is italic, in small-caps, bold, 100% in size, and Georgia.

Revision Notes

August 24th 2016