A cascading style sheet (CSS) is used for the layout of webpages. Every element of a webpage, for example text, images or tables can be styled using CSS rules. This tutorial will demonstrate how CSS font properties are used for the styling of text.

Font-weight

Font-weight is one of the text properties that can be applied to a text. There are two possibilities to specify font-weight. The values 300, 400, 500, 600, 700, 800, 900 are valid, but also the values ‘lighter’, ‘normal’, ‘bold’ and ‘bolder’ can be used. ‘Bold’ is equal to 700, while ‘normal’ equals 400. The font-weight property is specified as follows:

p {
    font-weight:600;
}

When using different font weights you have to take care of the font family you are using. Not every font-family has all font-weights available. If you are using Google webfonts, you have to explicitely select and include the font-weight you want to use in your website. If your chosen font-weight is not available, your browser will automatically select a different weight. Note that including all possible font-weights without using them may slow your website down!

Font style en color

The CSS property ‘color’ defines the color of the text. Color codes can be specified in either the hexidecimal notation (e.g. #131313), the rgb notation, where the values of red, green and blue each range between 0 and 255, or the HSL notation. Transparent font colors are created using the rgba notation, where the fourth parameter indicates the opacity of the text with a value between 0 and 1. For a fully transparent color a value of 0 is used, whereas 1 indicates fully opaque. Transparent colors are not supported by IE8 and lower, so if you have to support these older browsers, you have to provide a fallback.

To emphasize a piece of text, the css property font-style may be used to show text in italic. In HTML4, the tag <i> was used to italize text, but in the latest HTML5 standard, this tag also has a semantic meaning. If a piece of text is for example a technical term, or a phrase from a different language, this is placed between <i> tags. By default, text between <i> tags is displayed in italic, but this can be overwritten by the font-style property.

The examples below makes use of the CSS properties color and font-style:

p {
    color:#1D1313;
}

p.italic {
    font-style: italic;
    color:#D22042;
}

Font-size

In addition to the color of text, the size may be varied using the font-size property. There are several units in which the size of text can be defined. Pixels (px), em’s and rem’s are commonly used. A pixel is an absolute unit, which means that a font has the same size on every screen. That may seem useful but you have to take into account that your website may be viewed on different screen sizes. A title of 40px fits nicely on a big desktop computer, but is much to big on a smartphone.

To overcome this issue, media queries can be used to define different font-sizes for different screen sizes, but this will be discussed in another blog post. Another option is to use the relative unit em. When using em’s, you specify the size of text relative to the font-size used by the device. This default font-size is usually chosen such that text can be easily read. By defining the font-size of a h2 element to 2em, this means that a h2 is two times as big as the body text.

Using em’s to size your text can be a bit tricky. The size of the text is determined relative to its parent element, so when nesting elements (e.g. a list within a list) this may give unexpected results. To overcome this problem, the rem unit was introduced in CSS3. Rem is short for ‘root em’ and means that we have to specify the font-size relative to the font-size of the root: the html element. Defining the font-size of h1 elements to be 3rem means that h1 elements are three times the font-size defined for the html element. This way, we only have to explicitely specify the size of the root, while we can still use the relative units.

In the example below, we have expressed the font-size in px:

p.size-big {
    font-size: 65px;
    color: #F24E4E;
}

p.size-small {
    font-size: 40px;
    color:#F78145;
}

Font-family

A website usually contains a lot of text. To make your website look great and unique you can change the default font family used by your browser by a better-looking one. In the early years of webdesign, the choices were limited and for example times, arial or courier had to be used. Nowadays there’s a lot more possibilities to use a great font-family. There are several websites, like fontsquirrel or Google webfonts, that offer a huge collection of fonts for use on websites.

Before a font can be used in a website, its has to be loaded. Google fonts are very easy to integrate. After selection of a font of your choice, a link is provided which has to be pasted in the <head> of the html document. In the example below, the font Kaushan is used. We had to put the following code in the head of our document:

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

Another posibility to make the fonts available for your website is the @font-face rule, which can be used directly in your CSS document. There are several file formats in which a font can be written. It’s advisable to include your font in different file formats, because different browsers support different formats. If you include fonts in ttf (TrueType), otf (OpenType) and woff (web open font) browser support should be fine. By using the @font-face rule, you first define the name of your font, followed by the url where the font file is located.

@font-face {
    font-family: my-font;
    src: url(my-font.woff) format('woff'), url('my-font.ttf') format('truetype');
}

After including the font, it can be used in the CSS file for the styling of text. In this case the name ‘Kaushan Script’ was provided by the Google font website. When you include the font files by using the @font-face rule, the name you have provided must be used (in this case ‘my-font’). It’s possible to list multiple font-families. If the first one cannot be used for some reason, the second is automatically used.

p {
    font-family:'Kaushan Script',cursive;
}

Text-shadow

Since CSS3 a shadow can be applied to text by using the text-shadow property. Text-shadow needs 4 values. The first value indicates the position of the shadow in the horizontal direction, the second the position in the vertical direction. The amount of blur is specified in the third parameter, whereas the last parameter is the color of the shadow. Text-shadow is not supported by IE9 and lower, but since it’s not an essential property, it can be safely used.

p {
    text-shadow: 2px 2px 2px #ccc;
}

Font variant

With the CSS property font-variant, text can be transformed into small-caps. In the example below, the bottom sentence has font-variant normal, the default value. The word in the upper sentence is transformed into small-caps. The first letter is a normal capital. The rest of the word is also shown in capitals, but smaller, hence the name ‘small-caps’. The following line of CSS is responsible for this transformation:

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

Animation of font color

Since the introduction of CSS3, animations can be made using CSS only. No Javascript is required anymore. One of the CSS properties that can be animated is the color of fonts. To do this, the @keyframes rule have to be used. In this example, we animate the color of the text. First, you have to define the starting point of the animation. Here we use hexcolor #F9BA15. Next, we define the properties of the animation: animate-font-color is the name of the animation. 12s is the total duration. The third value is the timing function. Here we used ‘linear’, but by default the animation timing function ‘ease’ is used. With ‘ease’, the animation starts slow, then speeds up, and slows down near the end. The next parameter, 2s in this case, is the delay of the animation. This animation starts 2 seconds after the page is loaded. When the animation reaches the endpoint, it will automatically start again. This is indicated by the ‘infinite’ keyword. Instead of ‘infinite’, a number n can be given meaning that the animation will play n times.

In the next step we have to define the different states of the animation in the @keyframes rule. First you have to state the name of the animation. In our example, we have used animate-font-color. Next, we define the color of the text at different times of animation.

p {
    color:#F9BA15;
    animation: animate-font-color 12s linear 2s infinite;
}

@keyframes animate-font-color {
    22% {color: #BF0C43;}
    44% {color: #452B72;}
    66% {color: #BF0C43;}    
    90% {color: #F9BA15;}
    100% {color: #F9BA15;}  
}

The @keyframe is relatively new and to use this rule on webkit browsers, the browser prefix ‘-webkit-‘ has to be used on the animation and @keyframe rules (not shown in the above example).

Further reading about CSS properties

We like to hear what you think of this tutorial. Did you enjoy reading it and was it useful? Please leave your comments below!