According to Wikipedia, typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Some of the aspects involved in typography are type faces, fonts, size, color, weight, alignment, leading, letter spacing and kerning. Most of these topics will be discussed below
Typeface, Type Family & Fonts
Typeface is a collection of characters composed of letters, numbers, special characters, punctuation, etc. To understand the difference between a typeface and a font, please read this post.
If we look at the popular typeface or type family offered on Google Fonts is Playfair Display, you can see that it contains several different fonts: Regular, Regular Italic, Bold, Bold Italic, Black and Black Italic. Three of the different fonts are shown below: Playfair Display regular, regular italic and bold.
The typeface or type family is the collection or set of one or more fonts. A font is a specific weight and style of that typeface. You can read more about fonts and typefaces in this blog post.
A web font is a font installed on a web server that allows you to create web pages with a large variety of font faces as opposed to having to rely on the fonts installed on an user’s computer.
Without the use of web fonts, you have to design your website’s pages and content with a very small selection of fonts that are universally installed on most (but not all) of computers. By using an externally linked web font, you have access to hundreds if not thousands of web fonts, allowing you to choose fonts that more closely match your brand’s personality.
To read more about web fonts and their use, please read this blog article.
A font style is a declaration of the way you wish your text and headers to display on your website using a code called CSS or cascading style sheets.
With a CSS font-style, you specify the size, weight color and style of the fonts on your website. To read more about CSS and how to create a font style, please read this post.
A serif font has a small decorative line added to a glyph for character. Take a look at the two sets of characters below. Notice the letters on the top have a little added embellishment to the top and bottom of each letter. Then compare that area shown in red to the two letter at the bottom.
Serif fonts tend to be more formal, traditional and classic. Traditionally serif fonts were recommended for print publications that had large blocks of text like books, magazines and newspapers. In print form, serif fonts tend to be easier to read. However this isn’t always the case in digital form, like text on a website.
It’s not to say that serif fonts should never be used on web content. However, you should consider the readability and definitely the size of the font if you choose a serif font for your website’s paragraph or body text.
Sans Serif Fonts
So above I talked about how serif fonts have an extra embellishment at the ends, tops and bottoms of the characters. As you can see from the sans-serif font above, they do NOT contain an extra embellishment.
Not always, but in general, sans-serif fonts tend to look more modern and contemporary.
Slab Serif Fonts
Slab serif fonts are a block-like serif font, as you can see looking at the examples below. Both the slab serif and serif fonts have embellishments at the top and bottom of the characters. However, the slab serif embellishments are chunky, block-like, heavy, squared, more masculine, etc.
Slab serifs are a much more modern font. Serifs originating all the way back to ancient Roman times. By contrast, slab-serifs first appeared in the 19th century. Consequently, depending on the font, they can have a retro, vintage or antique look to them, particularly reminiscent of advertising from the day.
Script fonts are exactly as they sound. They are fonts that are meant to mimic handwriting or cursive. They can range from highly decorative, ornate fonts found on wedding announcements, to fonts meant to mimic brush strokes or calligraphy pens, to fonts that look like normal, average, every-day cursive writing.
Script fonts should never be used for paragraph or body text as it would make it too difficult to read.
Display fonts are only meant for headers, titles and very small lines of text. They are usually very hard to read at smaller sizes so should never be used as paragraph or body text.
They are perfect for adding personality to a business’ visual branding or graphic design project. But again, only if used in large sizes and small amounts of text like headers and titles.
Monospaced fonts are also called proportional fonts because every letter, character and punctuation takes up the same amount of horizontal space. Consequently, they can be tough to work with online because the letter spacing doesn’t always look right and you need to be able to handle the kerning (space between individual letters) manually, which can be difficult to do on a website.
This is an example of monospaced font used on a website.
A dingbat or dingbat font is a font that creates a typographical decorative element. For general use in graphic and web design, they are used in bulleted lists and as illustrative or visual highlights. Below are some example of dingbat fonts. Every dingbat font will have its own set of graphical elements. To illustrate this, each line of “text” below are the letters “dingbat font.” But because different fonts are used to display them, the graphical elements are different for each font.
Letter Spacing or Tracking
Letter spacing, also known as tracking, is the space between a group of characters. It is used to help with legibility of the text the font is being used to display the text, as well as the “look and feel” of the text being displayed.
As shown above, text with a lot of letter spacing will have a more open and airy feel. It can also have a more modern and contemporary feel. Its important that when applying letter spacing, you keep readability in mind. Too tight or too loose, and the text may become very difficult to read.
Kerning is similar to letter spacing, except it is the adjustment of spacing between individual letters or characters as opposed to the entire group of letters. And example of kerning is shown below in the animated gif.
Leading or Linespacing
Leading, or linespacing, is the vertical space between the lines of text. Like kerning and tracking, it helps makes text more readable. It also also lend itself to visual branding as more space between lines of text tends to make it appear more open and airy. Depending on the fonts being used, leading can sometimes be tricky to control because of the ascenders and descenders (see below) on certain characters. Too little leading and they can overlap, interfere with one another and cause the text to be difficult to read. Below is an example of leading in action.
Ascenders & Descenders
Ascenders and descenders are the parts of letters or characters that extend above the x-height (ascender) or below the baseline (descender).