
Typography 101 – The art of text
What is typography?
Typography is everywhere around us. It’s the letters we see, the words we read. It’s the art of arranging types. Every time you write something down, you’re creating typography. It can be good or it can be bad but it’s still typography, and you’re the typographer.
Let’s say you’re writing an article on the web and you’d like whoever is going to read it to read the whole thing. Unless you’re writing about the next British royal baby or some celebrity getting their nudes leaked, chances are that most of the users will just scroll through it and move on to the next article or page. In order to catch the user’s attention you need to make your text look good before making it worth reading. Enter typography.
Good typography can be achieved on multiple levels and it depends on many “details”, but on a macro scale it can be broken down to two basic factors: legibility and readability. The two things you should be asking yourself when writing is:
- Is my text legible?
- Is it readable?
Legibility
Legibility is all about how the typeface is designed and how well can characters be distinguished from one another.
There is a reason certain typefaces are used mostly for headlines or mostly for body text. They are designed with the purpose of either attracting users attention or not getting in the way of reading. Either way, legibility is about the design of the typeface itself. There are fonts which are very flexible. They come in several weights and can be used in different ways. Others, however, are not so flexible and are designed for a specific use.
Display vs. Body faces
Display faces are typefaces designed to be used in a large size and are usually less readable at smaller sizes. These typefaces should be used for headlines and not for longer passages of text. See, typography is all about finding the right typeface for the right job.
You can clearly see how this typeface would be difficult to read at smaller sizes and in larger quantities. It’s not really scalable, and reducing the size will result in loss of many details. When we talk about typography, we are actually talking about adapting the particular typeface to various contexts.
There is a huge number of typefaces designed to be used in large quantities and for smaller text sizes. These are called body faces. You can see in the picture how this typeface would be easy to read at any size regardless of the text quantity.
So to make sure your text will be legible it is important to know the context of the typeface you want to use.
Serif vs. Sans-Serif
Designers worldwide are still arguing on the legibility of serif and sans-serif typefaces. If we look at most of the books, especially older editions, we can notice that most of them are written in serif typefaces. Serif has always been considered more readable because it allows the eye to flow easily from one letter to another making the process of reading both easier and faster.
This does not mean that sans-serif typefaces are less readable. If you visit some web pages, blogs, online magazines etc., you will notice that they mostly use sans-serif fonts, and you can read all the content without any difficulties. Sans-serif fonts are considered modern and trendy. They go with current design trends and have simple letter forms.
Since we don’t often read large passages of text on websites, you can feel free to use any typeface you like, as long as it fits the profile of your choosing.
Readability
Readability is all about making your text easy to read. It depends on a large number of factors, and I will walk you through some of them.
Line length
It is a general practice to keep the amount of characters per line anywhere between 45-80. Anything longer and you will end up with a pretty unappealing and exhausting block of text to read.
Line height
The improper use of type spacing greatly affects the readability of your text. This refers to the vertical distance between lines of text. It should be set between 120-140% of the point size. Too much line height makes it seem loose and too little makes it too tight. With the first option, you get a text that does not seem connected, and the reader will have a hard time following the lines. With the second one, you will end up with a block of tight text that will take more effort to read and probably tire the user very quickly.
Letter spacing
Letter spacing refers to increasing or decreasing the amount of space between letters and words in paragraphs of text. This is known as tracking. Make sure not to confuse it with kerning, the adjustment of space between individual characters (also known as kerning pairs). Each typeface has a certain amount of kerning pairs, but it differs from typeface to typeface.
Alignment
Since almost everything we read is aligned left, or at least left-justified, you need to keep in mind that every other text alignment will definitely be inconsistent with our reading habits. Therefore, it will require more concentration and effort to read the text. Other alignments, such as centered or right alignment, can be used in various design purposes, but for the sole purpose of reading a piece of text for its content, it is better to go with the usual.
Font Style
Roman is the most commonly used font style and is the easiest to read. Unless you’re trying to attract attention to certain parts or emphasize something, don’t go with italic or mess with the font weight.
Point size
Point size is the size of your characters. If you’re writing something that’s going into print, you might want to keep it somewhere from 10-12 points, and if it’s going on the web, you can go with anything from 16-26, depending on your target audience.
Contrast and Hierarchy
This is a basic point which can improve readability greatly if used correctly (and can also decrease readability with improper use). I’ll explain this one with an example. Let’s say you have some information about a play that’s happening at your school or a theatre nearby, and you want to hand out some fliers with the basic information around. Here is an example of what you have and what you can do with it to make it more readable (and more appealing for the reader):
As you can see, there are a lot of decisions to be made before you publish something regardless of it being on the web or going to print. Typography plays a larger role in perception of content than people seem to realize. There are no strict rules you can follow to make your text look good, but there are some basic ones you can follow to make sure your text does not necessarily look bad. If you can balance good readability with legibility, you should have no problems. You don’t have to be a expert at typography or a designer, just keep in mind who your readers are, and what you are writing about.