Defining Fonts in CSS: Overview and Examples
Introduction
Typography, as a very important part of a website’s design, is well supported by CSS2. More specifically, all important font properties (font family, font size, font weight, etc) are supported and included in this version of CSS. This article deals with defining fonts in CSS; more specifically, it covers font-family, font-size, font-weight, font-style, font-variant and font CSS properties.
Font-family CSS Property
The purpose of font-family CSS property is to set font family names, ranked by priority. This property is responsible for the way some piece of text is displayed. When rendering a text, web browser will use the first font from the list. Since there is a possibility that the browser will not support any of the predefined fonts, a generic family name should be included as well, and should have the lowest priority. Since a generic font will always be rendered, it is pointless to include any other font after the generic one.
How to declare a font family in CSS? An example follows:
p {
font-family: Arial, Helvetica, sans-serif;
}
In this example, there are three fonts defined. Which one will the web browser choose? Once a web browser loads text which exists between and , it will try to use an Arial font to render it. If an Arial is not available, it will try to load Helvetica. If this one is not available as well, the browser will finally use its default sans-serif font. While declaring fonts, it is important to remember that the font family names are separated with a coma sign.
Font-size CSS Property
Font-size CSS property specifies the font size of a text which it is applied to. This value does not accept only numerical and absolute values, but it can accept percentages as well. Let’s take a closer look of these three possibilities. First, an example of numerical value follows:
p {
font-size: 10px;
}
If this CSS code is used, a web browser will render text wrapped with element at 10px.
Furthermore, an example of an absolute value follows:
p {
font-size: large;
}
In other words, font size is defined with some of the available keywords (xx-small, x-small, small, medium, etc). The sizes of these values are not defined, but small should be bigger than x–small, medium should be bigger than small, etc).
Finally, a percentage value can be also used, such as in the following example:
p {
font-size: 70%;
}
If this property is set, the size of the text wrapped with element will be 80% of the parent element’s font size.
Font-weight CSS Property
Font-weight CSS property specifies the weight of a text which it is applied to. This property accepts both numeric values and keywords (such as bold, bolder, normal, inherit, etc). Examples for both possibilities follow:
p {
font-weight: 400;
}
And:
p {
font-weight: bold;
}
Although this property can accept various numeric values, most fonts are not available in these weights. Instead, they can be rendered only with 400 (normal) and 700 (bold) weights. Some numeric values also match particular keywords. For example, bold equals 700, while normal equals 400.
Font-style CSS Property
Font-style CSS property specifies the style of a text which it is applied to. This CSS property accepts four values: italic, normal, oblique and inherit. An example follows:
p {
font-style: italic;
}
Font-variant CSS Property
Font-variant CSS property specifies the variant of a text which it is applied to. This CSS property accepts three values: normal, small-caps and inherit. Small-caps are defined as fonts in which lowercase letters are rendered as smaller versions of their corresponding uppercase letters. An example follows:
p {
font-variant: small-caps;
}
Font CSS Property
Finally, defining fonts in CSS can be achieved with a comprehensive Font CSS property. This property can accept the values of several other CSS properties, such as the font family, font variant, font weight, etc. When declaring these values, a declaration order should be respected according the following syntax:
font: { [font-style] [font-variant] [font-weight] font-size [ /line-height ] font-family | caption | icon | menu | message-box | small-caption | status-bar | inherit } ;
An example follows:
p {
font: bold small-caps 0.6em/1.4 Helvetica, Arial, sans-serif;
}
Font size and font family values are mandatory. If some value from the list (syntax) is not specified, it will be set to an initial value, rather than its inherited value.
