SJHwebdesigns

Typography

« Previous: CSS syntax | Next: Backgrounds »

You can make many changes to the type using CSS. Here are some common properties:

font-family

This defines the typeface that will be used. Be aware that this will only work if the font is installed on the site visitor’s computer; unfortunately, the list of ‘safe’ fonts that almost everyone can be assumed to have is very small and not particularly exciting. The most commonly used are:

  • Arial
  • Georgia
  • Times New Roman
  • Trebuchet MS
  • Verdana

Even though most users will have these fonts installed, it’s still a good idea to specify alternative fonts to display just in case your first choice is not available. This is done by listing each font in order of priority. For example:

body {
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          }

Here, Trebuchet MS is the first choice – if the user does not have this font installed, Arial will be substituted. If neither of the first two are available, Helvetica will be used, and if none of the named fonts are installed, the system default sans-serif font will be used. Note that font names of more than one word must be put in quotes.

Sans-serif fonts - that is, fonts such as Arial and Verdana, without the little strokes on the ends of the vertical and horizontal lines - are generally considered easier to read, particularly at small sizes, so they are commonly used for body text, though serif fonts such as Georgia and Times New Roman can look good as headers. If you're going to have different fonts on a page, you should try to keep this within 2 or 3, and ensure that there's sufficient contrast between the different types, or the design will start to look cluttered.

font-size

Surprisingly enough, this specifies the size of the font. There are many units that can be used, but I would recommend using either percentages or ems (one em is equivalent to the width of the letter ‘m’). These are relative units of measurement, that is, they are defined relative to the initial size of the font, rather than as a fixed size in pixels. This will ensure that text can be easily resized, which considerably increases the accessibility of your site. For example:

body {
          font-size: 0.9em;
          }

Notice from the list above that some fonts are much larger than others! This is something to be very careful of when using larger typefaces like Georgia and Verdana at small sizes - check that the text is still legible when using the substitute fonts.

font-weight

Can be used to set text as bold or normal.

li {
          font-weight: bold;
          }

li li {
          font-weight: normal;
          }

This sets list items to be displayed in bold, but any list items within list items to display normally (see Grouping and Nesting in the previous section).

font-style

Sets text to italic or normal.

li {
          font-style: italic;
          }

li li {
          font-style: normal;
          }

color

Sets the colour of the text. If the element has a border, the colour will be applied to that as well. There are a few named colours, but it’s better to use hexadecimal colour codes.

body {
          color: #444;
          }

At the risk of stating the blindingly obvious, you should always ensure that there is sufficient contrast between text and background so that the page is easy to read! However, as black text against a solid white background can be a bit glaring on a computer monitor, many sites add a slight tint to the background colour, and/or set the main text to a slightly lighter shade than full black.

text-decoration

This can add or remove other decorations to the text:

  • underline should only be applied to links, or you run the risk of confusing people
  • overline will add a line above the text
  • line-through adds a line through the text.
  • none removes any default text-decoration. This can be useful when styling links, as they are underlined by default.

You can combine multiple values within this property – for example:

a {
          text-decoration: underline overline;
          }

will give your links an underline and an overline.

text-align

This property is equivalent to the align attribute in HTML. It can take values of left, center, right or justify.

So putting it all together, we can create a set of rules like this:

body {
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          color: #090;
          }
a {
          font-weight: bold;
          color: #ea6300;
          text-decoration: none;
          }
h1, h2, h3, h4, h5, h6 {
          color: #a00;
          text-align: center;
}

Other text properties

Once you're familiar with the properties described in this section, you may want to investigate more text-related properties, such as:

« Previous: CSS syntax | Next: Backgrounds »

Page style: Dark Light