Typography and Design
What is Typography?
Typography is a massively important aspect of any design. Fonts, typefaces, and typography don’t all mean the same thing. Typefaces are a part of fonts, fonts are a part of typography, but there’s more to it. Typography is talking about the visual aspect of letters, or a suite of characters. Numbers, punctuation, and symbols are included in typography.
Typography is the ‘dressing up’ or the ‘prettying’ of text or copy. Good typography makes text or copy visually appealing, easy to read, and it makes reading those words a pleasant experience. It’s all about the shapes of the letters, the width, the boldness. Not to mention the spacing between the words, between the letters, and even between pairs of letters.
Some key terms
Typeface refers to a family of fonts. Fonts are categorised together when they share similar design characteristics.
Fonts are a combination of the typeface, the weight, size, and spacing, along with other design features that make them unique.
A font that has serifs. A serif is a small line or a stroke on a letter. Serifs are sometimes referred to as feet.
Sans serif fonts are simply fonts that don’t have serifs — sans means without.
The baseline is an imaginary line where the characters sit on top of.
The cap line (or cap height) is the baseline’s cousin, it’s the imaginary line where the ascender (the part of a lower case letter that reaches up above) reaches or the top of capital letters.
Kerning is the the spacing between letters. If it’s done wrong it makes words appear different or difficult to read.
Leading refers to the distance between the baselines of the text, it’s basically line spacing.
Typography in Print Media
When it comes to print media, whether it’s a business card, a flyer, or a zine — typography matters. Typography can be the make or break between someone continuing to read, or deciding ‘nah’. Different typefaces can incite different impressions and emotions, they subtly tell the reader what to expect.
In print media, typography is a serif game. Remember the ‘times new roman only’ rule in school? Or every newspaper ever? Serif fonts are easier to read on paper, they help the reader determine the shape of the letter quicker. Fonts that are easy to read mean the reader is more likely to retain that information.
Don’t forget that bold and italics are tools for emphasis, so they should only be used when something needs to be emphasised. If everything is emphasised… then nothing is emphasised. Bold should be used carefully and should never replace or substitute italics, or vice versa — they have different purposes and send different messages to the reader.
Typography in Design
Designers can use typography to evoke emotion. Readers, users, observers of your design can make assumptions and calls about your design and the brand you’ve created before they’ve read the text. Typography tells people how to feel and it helps them interpret the text and make decisions about it. Where a clean serif font can come across as traditional and professional, a neat sans serif font can show modernity and responsibility. A fancy cursive font can imply style, femininity, an upper market feeling, or a creative yet elegant brand.
Typography in Web Design
The rules of typography in print media don’t directly transfer to typography in web design. Reading text on a physical page isn’t the same as reading on a screen, so the rules change a bit. Fancy fonts don’t really belong on the screen. Web design is all about simple to read fonts. We’re talking sans serif, high contrast fonts. Sans serif is for sure the most important detail, because the letters have a higher contrast on the screen.
Readability is the most important factor in the decision making process for website fonts. Selecting a font that’s familiar with users, like Montserrat means the user is more likely to retain the information they read. Rather than using brain power and energy adjusting to a new font and taking those small (seemingly insignificant) moments to recognise differently shaped letters, users can use the saved time and effort to actually remember what they’ve read.
Web designers can enhance readability by ensuring the colour of the font contrasts well and effectively with the website’s background colour. A small sized font should have a contrast ratio of 4.5:1 at least against the background. Larger text should have a ratio of 3:1 against its background.
Websites shouldn’t feature any more than three different fonts. Ideally they should use only two, one for copy and one for headings. But there are cases where a third can be appropriate or even necessary. Using too many fonts or too many differently sized fonts can make websites look unprofessional and tacky. Varied fonts across a website throw off the structure of the website and its design — plus they can somewhat compete with each other.
Line lengths should be taken into consideration in typography and web design too. Around 60 characters per line is said to be a neat rule of thumb for desktop reading. A line too short forces the eye to travel back too often, interrupting the reader’s focus. Adversely, if the line of text is too long, it means the user will find focusing on the text to be too difficult.
The size of the font matters too and it’ll change from mobile to tablet and to desktop versions of the website. So if designers are wanting to take more of a risk in their design or choose something just a little different, they should try those different sizes on. Try the font in a tiny size, in a huge size, and try it in all capitals.
Consider the leading too. Too close, or too tight is hard to read, it’s harder for the eye to focus. Too much leading, or too much space between those lines ruins the rhythm of the read. Find the middle ground and include the perfect amount of white space to ensure an easy read for the user. Remember that if you’re using any colour combination in your design other than black text on white, the leading should be increased. There’s no ultimate guide or rule of thumb for leading. The best way to work out if the leading is right is to compare the same text side by side with different leading to see which looks most comfortable.
What about on Mobile?
A misconception in mobile web design and typography is that a small sized font will suit a small screen. Realistically, a bigger and easier to read font is best. A smaller font battling the brightness and the contrast of its background can become strenuous on the user’s eye. We mentioned up above that in web design for desktop, somewhere around 60 characters per line is best for readability. When it comes to mobile the ideal is somewhere between 30 and 40 characters per line.
We recently talked about responsive web design and how integral it is to an effective and successful website. The wrong placement of design elements or typography can throw off the structure and hierarchy of the design. Choose your fonts with consideration for how they’ll work across all different kinds of devices.