Typography for the Non-Designer

Typography for the Non-Designer: Graphic Design Basics by Design for Creative Souls
Typography

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 font variants or styles: Regular, Regular Italic, Bold, Bold Italic, Black and Black Italic. 

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

Playfair Display typeface
Web Font

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 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.

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.

Font-Style

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.

However, using the WordPress Customizer and Elementor’s text editor means that even non-developers and people who don’t know how to code CSS can create unique and custom font styles for their website.

Serif Fonts

serif font has a small decorative line added to a glyph, or 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.

serif / Design for Creative Souls
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.

Slab Serif Fonts
Script Fonts

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.

Script fonts
Display Fonts

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.

Display Fonts
Monospace Fonts

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.

However, because they are a throwback to typewriters that also typed in proportionally spaced fonts, they have a retro look and feel to them, which can be very appealing to some brands.

Monospaced Fonts
Dingbats

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 were typed using the same letters on the keyboard. But because different dingbat fonts are used on each line, the graphical elements are different for each font.

Dingbats
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.

Letter Spacing, or Tracking
Kerning

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. An example of kerning is shown below in the animated gif. 

It’s possible to achieve kerning with live, dynamic text on a website, but it is much more difficult and requires some CSS knowledge. This is the reason why so many of the free Google web fonts aren’t very popular and rarely used – because the natural spacing between the letters wasn’t thoughtfully designed and some of the words can look very odd. 

So…choose your Google font’s wisely and be prepared to change and choose another typeface if you find the one you’ve chosen isn’t “kerning” well on some words. This is an easier approach for most people as opposed to trying to use CSS to make the change.

Kerning
Leading, Line Height or Linespacing

Leading, or line height, is the vertical space between the lines of text. Like kerning and tracking, it helps makes text more readable. More space between lines of text tends will make the text appear more open and airy. But there is a limit as to how much leading you can have before the text is difficult to read.

Depending on the typeface being used, leading can sometimes be tricky to control because of the ascenders and descenders (see below) of the various characters. Too little leading and they can overlap and interfere with one another, causing the text to be difficult to read. Below is an example of  leading in action.

Leading or Line Height
Ascenders & Descenders

Ascenders and descenders are the parts of letters or characters that extend above the x-height (ascender) or below the baseline (descender).

Ascenders & Descenders
You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

Share Post
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on pocket
Share on email
Affiliate Links

One or more links on this page may be an affiliate link. What does that mean? At no additional cost to you, I will earn a small commission should you click on one of the affiliate links and purchase the product or service. 

Take the Brand Personality Quiz

Discover your brand archetype and how you can use its power to your strengthen your online presence