Loading Please Wait...

The Ultimate Guide to Typography

16 June 2017
Tutorials

The Ultimate Guide to Typography

Some say that the history of typography dates back to when scribes used to carefully and meticulously write up texts by hand. Even though there were no discernible fonts at that time, there were still variations in size, weight and style. Fonts as we understand them didn’t appear until movable type printing presses were invented by Johannes Gutenberg in 1455. Since then, typography has come a long way and we now have thousands of fonts to choose from. But is typography just about fonts?

According to the Collins online dictionary, typography is defined as “the art, craft, or process of composing type and printing from it.” Composing type involves a lot more than simply choosing a nice font. Typography means making decisions on all sorts of things, from the weight of the font to the text’s alignment and justification. A typographer needs to know how much space to include between lines, between paragraphs, and even between individual letters. Like anything that is described as an ‘art’, there is lot of skill involved. We’re going to define some of the jargon for you in this blog as well as give some advice on how to make that tricky decision on which fonts to use.

Defining Key Terms

Font vs Typeface

Although these two terms are often used interchangeably, they actually refer to different things. A font is a subcategory of typeface. In other words, a typeface is a family of fonts, all from the same base style, such as Arial. Each font within a typeface is a variation in weight, size or spacing and so you develop Arial Black, Arial Narrow, and Arial Unicode MS.

typeface font

Style

When it comes to typography, style has a very specific meaning. It refers to the changes you can make to a font without changing it to an entirely new font. For example, making a word bold, italicising, underlining, adding dropped shadow – all of these are styles. Applying styles is what you do to emphasise a word or phrase.

typography style

Weight

Weight refers to the thickness of the strokes used to create letters. Making a font bold is one way of altering the weight but it is not the only way. If it were, you would be limited to only two weights; normal and bold but you can increase or decrease the weight as much as you like. As you can see, Arial with a bold style is not the same as Arial Black. Changing the weight of your text is a good way to create variation without having to worry about whether the fonts you’ve chosen work together.

typography weights

Leading

In movable type printers, there used to be a strip of lead between each line of text to keep them separate. This has been developed so that ‘leading’ now refers to the space between lines of text which can be edited easily on our computers. Specifically, leading is the space between baselines so ascending and descending letter strokes will cross these lines. This aspect of typography is particularly important in making text readable – lines too close together mean readers end up skipping lines by accident.

X-Height and Set Width

As you might have guessed, these terms refer to the height and width of individual letters. X-height is fairly straight forward but set width can be more interesting. Set width includes the width of the actual letter plus some space afterwards to buffer the next letter. You can use monospacing, meaning that each letter has the same set width, or you can have proportional where the set width of each letter depends on how wide the letter-form is. For example, ‘I’ is very thin, whereas ‘M’ is much wider. Monospaced and Proportional set widths can create different visual styles for your text.

typography set widths

Alignment and Justification

These two terms are to do with the positioning of text on a page. As you can see in the examples, paragraphs can be aligned to the right, left or centre of the page. Paragraphs can also be justified which mean the spaces in between words are tweaked to ensure that the line fills the full width of the page. Justified text is often seen in newspaper columns.

typography alignment

Font Families

It can be helpful to know about the broader categories that fonts and typefaces can fall into when choosing which fonts to use for a piece of work.

Serif

Serif fonts are often chosen for more traditional, formal pieces of work. A serif refers to the small extra lines that sometimes appear on the ends of letter strokes.

typography serif

Sans- Serif

‘Sans’ is the French word for ‘without’ making the term Sans-Serif to literally mean ‘without serif’. It naturally follows that sans-serif fonts are those which do not include the extra little lines at the end of letter strokes. This makes the text instantly look more casual.

typography sans serif

Slab-Serif

With slab-serif fonts, letters do have serifs attached but instead of being small additions, the serifs have the same stroke width as the rest of the letter and often are not rounded. These fonts are bold and, as such, are chosen for titles to grab attention.

typography slab serif

Blackletter

Also known as Gothic or Old English, this was one of the original fonts designed. The style was intended to mimic the popular calligraphic, handwritten style used by scribes. The style is very dramatic and usually includes elaborate capital letters. Because of its origin, fonts in this family have an inherently medieval and antiquated feel.

typography blackletter

Script

Script, or Cursive fonts are also designed to represent handwriting but in a much more flowing style than Blackletter script. Script fonts can range from very casual handwriting styles such as Lucinda Handwriting, to much more calligraphic, swirling fonts like Dom Loves Mary. These fonts create a more humanised feel to a piece of text.

typography cursive script

Geometric

This font family is much more creative than the others in that it plays around with the overall shape of letters. Some geometric fonts rule out curved lines completely, others stretch out the text to make oval shapes instead of circular ones. The more tame geometric fonts can be used for official publications as it gives the subtle impression of dynamism and uniqueness. Be careful though, geometric fonts can also range to the extreme which would not be relevant for a lot of things.

typography geometric

A Guide to Choosing Fonts

There are thousands of fonts out there so the choice is huge but you’ll only ever need two or three fonts in any one piece or else it looks crowded. So, how do you narrow drown thousands of fonts to just two? Here are a few things you should consider when deciding which fonts to use…

1. Practicality

The absolutely first thing you need to think about it is what the text is for. If you’re designing a wedding invitation, feel free to go for the fanciest cursive script you can find. However, when it comes to detailing the time, date and place of the wedding, you’ll need a more straight forward font so that readers can quickly find and digest the important information.

2. Character

What mood are you trying to communicate with your text? If you’re creating a text-based logo, think about the personality of the company in question. The different font families express different characteristics so figuring out which best suits the company in question is a good place to start.

3. Contrast

When multiple fonts are involved it is important to get the level of contrast between them right. Too little contrast and the brain doesn’t register instantly that they are different and that jars slightly. Too much contrast and the piece looks chaotic and unplanned. Two fonts with similar structures tend to go well together with further contrast made by altering the weight, size, style or colour of one. Alternatively you could choose fonts with very dissimilar structures but make sure they have similar weights, sizes and style.

4. Hierarchy

Any piece of text which includes multiple headlines should have a definite structure so that readers can easily distinguish between the different levels of importance. A general rule of thumb to follow is to keep your most complicated font for the main title and then get more and more minimal as the headlines go down until you reach your text body, which should be very basic. You should still only be using two fonts but you can distinguish between levels using the same font by changing the size, weight, style, colour, leading and alignment.

typography hierarchy

Now that you’ve learnt everything you possibly need to know about typography, why not discover more design tips and tricks with our FREE eBook; 50 Tips from Designers, to Designers. This is your one-stop spot for inspiration and advice with input from big names in the business like Jacob Cass and Brent Galloway.


Tags