List of font families that are commonly known as the safe list

There are many fonts available out there but there is a list of font families that are commonly known as the safe list. The list consists of 9 font families and they are:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

You can use a font stack to preset different kind of fonts because in every computer, not all fonts are available. Example of font stack will be:

Font-family: ‘Calisto MT’, Georgia, ‘Times New Roman’ , serif;

This indicates that if Callisto MT is not present, the web browser will automatically switch all fonts to Georgia and so on.

In typography, we have a few things to look out. Take a look below:

Text Image Replacement

This is a technique of replacing a text element with an image. An example would be:

Figure 1: Text Image Replacement adapted from Sitepoint

In order to acheive this, there are a few methods to do so:

Phark Method - Negative Indenting

Figure 2: Phark Method CSS Code adapted from Sitepoint

Scott Kellim Method - 100% text-indent method

Figure 3: Scott Kelim CSS Code adapted from Sitepoint

Radu Darvas Technique - Margin Technique

Figure 4: Radu Darvas Technique adapted from Sitepoint

There are many other technique but these 3 are one of the many out there which can be found at Sitepoint .

Text Spacing

Horizontal Spacing

There are two terminology that is used in horizontal spacing and they are kerning and tracking. Kerning is the process of adjusting the space between individual letters. This is the wording beside each letter. Hence, each font has a set of rules that determine the spacing between specific character to make the text readable. Example would be shown below:

Figure 5: Kerning

Therefore, text in a web page is impossible to make letter-by-letter kerning adjustments to it. What can be done is adjust the letter-spacing CSS property, which is known in the print world as adjusting the fonts’ tracking. Futhermore, fonts are measured in pixels (px) , points (pt), Ems (em) and percent (%). You will see the difference of .01em Letter Spacing below:

Figure 6 : Tracking

Vertical Spacing

This is also known as leading. This is known as the vertical spaces at each character. An example would be the choice of 18px is better than 12px. In CSS, we can adjust the line-height property to get these effects. Below is the difference between default and 1.5em.

Figure 7: Leading

Text Alignment

CSS text alignment is adjusted using the text-alignment property. The alignment available are:

Center
Right
Left
Justify

Type of Fonts

Type	Example
Serif Fonts	These are the type of serif categories available. Serif are the way the stroke ends at the letters at the bottom as shown in the diagram
Sans Serif	The difference is that sans serif does not have decorative strokes like serif fonts but just a plain text
Handwritten Fonts
Fixed-width Fonts	Fixed-width or monospaced fonts.
Novelty Fonts	Known as display, decorative or fantasy fonts
Dingbat Fonts	They are also known as symbol fonts which are used for illustrations and artwork to be used into the design of a website

Source: The Principles of Beautiful Web Design Second Edition ,by Jason Beaird

Thumbnail: Designed by Freepik