Typography | HTML CSS Guide

Font Properties

color

The color property allows you to set the colour of the font. There are a range of colour names that you can use. If you find these limiting then you can use RGB (Red, Green, Blue) colours, most commonly in the form of hexadecimal colour codes. Here you 'mix' red, green and blue values together to create you colour. Additionally, you can use rgba (Red, Green, Blue, Alpha) for specifying opacity, and hsla (Hue, Saturation, Lightness, Alpha) for a more intuitive way to manage colours (and those familiar with image editors such as Photoshop).

Example:

      color: #FF0000;
color: rgba(255, 0, 0, 0.8);  /* 80% opacity */
color: hsla(0, 100%, 50%, 0.8);  /* 80% opacity */

In these examples we will use the generally most popular hexadecimal colour codes.

Warning CSS uses International English, so the property is color, not colour

Colour Resources

There are numerous resources related to colour. Here are some useful ones:

Maths is Fun – A great site for understanding RGB and hexadecimal colour codes.
Adobe Colour – Provides color schemes built around a colour wheel.
Colour Hex – Similar to Adobe Color but without the wheel.

font-family

The font-family property specifies the font face to use. It takes a list of fonts, trying the first listed font first, then the next, and so on. It’s advised to end any font-family list with a generic font family, like serif or sans-serif. Fonts with spaces in their names should be placed in quotes.

Example:

Note: Many websites use sans-serif fonts like Arial, Verdana, and Tahoma because there is evidence suggesting they are easier to read on computer screens than serif fonts like Times New Roman.

Tip: Google Font are a great free way to extend the choice of fonts.

font-size

The font-size property sets the size of the font. There are various units of measurement you can use from 'absolute' units such as px to more flexible relative units such as % and rem. Generally it is best to use a relative units like em and rem, which scale better across different screen sizes.

Example:

      font-size: 12px; /* Absolute unit */
font-size: 1em; /* Relative to the parent element's font size */
font-size: 1rem; /* Relative to the root element's font size */

font-weight

The font-weight property allows you to apply varying levels of boldness to text. It can take numeric values from 100 to 900, as well as descriptive values like bold, bolder, lighter, and normal.

Example:

The range of numeric values depends on the font in use.

Text Styles

text-align

The text-align property aligns text within an element. It accepts the values center, left, right, justify, and inherit.

Example:

text-decoration

The text-decoration property adds decoration to text, such as underlines. It accepts the values blink, inherit, line-through, overline, underline, and none. The blink value only works in Firefox. The none value can be used to remove the underline from links.

Example:

Google Fonts

You will recall you can create font lists as follows:

      body {
    font-family: Helvetica, "Helvetica Neue", arial, sans-serif;
}

As we rely on the fonts listed to be available on the users device and for years in web design this meant that we were limited to the 'web safe' fonts the likes of Arial, Courier New, Times New Roman, Verdana. The ability to embed fonts was described in the CSS2 specification and is now widely available as most browser now work with the CSS4 specification.

To embed fonts we use @font-face 'at-rule'. This is placed inside your CSS as follows:

      @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url("THE-ADDRESS-OF-THE-FONT-FILES");
}

Once embedded, the font can be used by referencing the font-family declared, like this:

      h1 {
    font-family: 'Roboto';
}

There are a range of font foundries where fonts can be downloaded - some you will pay for, and some are free. Google offers us 'Google Fonts' at https://www.google.com/fonts.

The great thing about 'Google Fonts' is that they will host the font files for you and provide the necessary code to embed the chosen font in your CSS files. Look for the option to 'Get embed code'. One option Google Fonts provides is oo place the @import 'at-rule' in your stylesheet ie:

CSS File
 
      @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* my other styling rules */

Warning: Be careful with 'fancy' fonts. One person's cool font, is another person's Comic-Sans. Try to limit the amount of fonts used and always ensure they are readable to your audience.

Additional Properties

Finally, not part of the 20 CSS properties but worth mentioning here are:

line-height

The line-height property sets the amount of space between lines of text, also known as leading. It accepts various units of measurement like px, em and %. If no unit is used, the value is based on the current font size. For example, if the font size is 12px, a line-height of 1.5 will result in an 18px (12 * 1.5) line-height.

font-variant

The font-variant property is used to apply small capitals.

letter-spacing

The letter-spacing property adds space between individual text characters (similar to, but not strictly, kerning).

text-shadow

The text-shadow property adds a shadow effect to text. It accepts values for horizontal offset, vertical offset, blur radius, and colour. The blur radius is optional, and the colour can be specified using standard CSS color values

Tip: Remembering the order of the values may be a waste of your grey matter. Use an online text-shadow generator.

CodePen Gallery

Have an experiment with any or all of the above:

See the Pen CSS Font / Typography Gallery by Martin Cooper (@mustbebuilt) on CodePen.