Typography is a huge topic. It’s a topic that can fasciate and captivate a person and lead them to dedicating their life’s work crafting and creating typefaces, and equally to some people is completely invisible and they barely register it as something of importance.
First a definition:
Typography is the art and technique of arranging and designing typefaces and text to make written language legible, readable, and visually appealing in various forms of communication. It encompasses factors like typeface selection, font size, line spacing, and overall layout.
As a designer, I know the importance of typography. It can make all the difference with a brand, a website design or a motion design piece. But it’s also really hard to get your head around all the aspects, and with almost limitless type options and possible tweaks you can spend forever stuck in type hell.
Here are five rules of typography that I’ve found to be really useful in guiding my design work, I hope they help you too…
- The Body text of a page / document is the most important aspect to get right. As opposed to headings, titles, or captions, there’s more body text than anything else and it should therefore easy reading. So start with the body text and then move on to everything else. But how do I make it look good…?
- Point size, which is the size of the letters. In print the most comfortable font size is 10-12 point. On the web, it’s between 15-25 pixels. Each typeface / font is different so adjust accordingly.
- Lined Spacing is the vertical distance between lines. It should be 120 – 145% of the point size. In CSS we use ‘line-height’ property to set this
- Line Length is the horizontal width of a block of text. Line-length should be between 45-90 characters in length, which is the equivalent of 2 or 3 lowercase alphabets. In CSS you can define the width of an element (e.g. a paragraph or div) which is often done with percentages. But there’s a letter know way of controlling the width using the ch which is the number of characters. i.e: width: 50ch limits the width to 50 characters. Awesome!
- Font choice! If money is no object, there are some amazing professional fonts out there that can revolutionise your design work. But not everyone can afford these. Luckily these days there are lots of free fonts out there that you can use commercially:
