Text and fonts
When designing a web site, it is important to consider the text, as it can have a significant effect on how readable your pages are. There are many different options and combinations possible, so I will not go into great detail on the typography (that could be a book in it self, and indeed it is. Actually there are several. If you only want to read one of them, I would recommend Thinking With Type by Ellen Lupton). Rather you will learn the tools so that you know what properties you can change to create a web site that is easily readable and good looking.
First we need to talk a bit about typeface terminology:
#### Terminology
Firstly, there are three typeface classifications you should know about (even though there are several more), namely serif, sans-serif and monospace.
Serif fonts have extra detail on the ends of the main strokes of the letteres. These details are known as serifs. In print, serif fonts were traditionally used for long texts because they where considered easier to read.
Sans-serif fonts have straight ends to letters, and therefore have a much cleaner design. Screens have a lower resolution than print. So, if the text is small, sans-serif fonts can be clearer to read.
Every letter in a monospaced (or fixed width) font is the same width (non-monospace fonts have different widths). Monospace fonts are commonly used for code because they align nicely, making the text easier to follow.
Secondly, font families can have different weights and styles. The weights are light, medium, regular, bold and black, which describes the thickness of the font. The style of the font can be normal, italic or oblique. We also have size, how large each letter is.
Thirdly we need to talk about font families. Within each classification we have different font families. A font is one specific combination of the mentioned attributes within a font family. That is, Arial 12px regular is another font than Arial 14px regular.
Setting the font
Now that we know some words, we can put them to use. The CSS properties that affects your font that you definitely need to know are:
font-family
font-weight
font-size
line-height
text-align
color
font-family is used to define the font family used. If none is defined, the browser's default will be used. When defining font family, you should define fallback families, in case the first one is not present on the client. It is possible to add fonts from e.g. Google fonts, the chosen font then doesn't have to be present on the client. Most often locally stored fonts are used, e.g. Arial and Georgia (which are considered web safe fonts because they are installed on all clients).
The font-family property is written like this:
Notice the serif value at the end. This says that "if any of the preceding fonts are not available, choose the browser's default serif font."
font-weight are written like this:
font-size takes a size as a value. It is easiest to start out with px.
Line height defines how high a line of text is. When the line height increases, the text does not increase in size, only the line, so the text will have more air above and below it. Increased line height can increase the readability of the text. A rule of thumb is to have 1.2x to 1.5x line height. The line height property can take a percentage (%), a length (px) or number (will be multiplied with the current font size) as a value.
If you want to vertically align text in a box you know the height of, you can use line height to do so by setting the value equal to the box' height.
Should you want to horizontally align the text, you should use the text-align property, which takes one of four values: left, right, center and justify. Justify stretches the lines so that each line has equal width, like in newspapers. Be aware of using justify, as the readability will suffer because of it, but it might used for design purposes.
Use the color property to set the color of the font. How to do this is described under the color chapter. In short, your write:
You can choose between hex codes, color names and RGB values as your prefered value.
A word to the wise
This section is only concerned with styling fonts, though there is more to web design than that. If you want to learn how to design your text so that it is readable and legible, you should read articles on typography, readability and legibility. A good starting point, should you want to read more, is to check out Smashing Magazine's "Size Matters: Balancing Line Length And Font Size In Responsive Web Design" and fonts.com's "It’s About Legibility". You can also read my article in Offline 2016-2 on page 22 "font-family: sans-serif, serif, wtf;" (shameless self promotion).
If you want to use other fonts than the standard font families available, you can check out Google Fonts.
Background color
Even though I have only talked about text color in this section, you should be aware that you also can set the background color of an element using the background-color property.
Contrast
Choosing the correct foreground (text) color and background color is important for legibility. When the contrast between the foreground and background is low, the text is harder to read. This is particularly a problem for those with visual impairments and color blindness, and it affects those with poor monitors and sunlight on their screens.
Text with a high contrast is easier to read. However, if the text is long, then too much contrast can make it harder to read too.
For long spans of text, reducing the contrast a little bit improves readability. Also note that it is better to read dark text on a white background than white text on a black background. I often choose a off-white background and a dark grey text.
If you want to have a dark background and light text, you can increase the weight of the font and the line height to make reading easier.
Last updated