Sony Simon Live. Love. Learn.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).
Just like colour, Typography has a huge impact on setting the tone of your website and creating visual hierarchy. It also enhances readability and has a great control over the content’s perceived length.
So here are my recommended 5 typography rules when designing a website.
Rule #1 – Limit the number of Fonts used
Use a maximum of 2 Typefaces or Fonts – Three’s a crowd! A typeface is a family of fonts with varying weights or other variations (e.g. light, bold, italic). With bold, italics and varying sizes, a single font can give you more than 4 styles. Using more fonts will detract the website visitors from the content and give a cluttered effect. Instead, use an interesting serif typeface or font for the headings and a neutral sans serif typeface or font for the body. That will keep the website design neat.
There are two types of fonts – Serif and Sans Serif. A font that has the small projecting features called “serifs” at the end of strokes is called Serifs. Sans Serif fonts do not have these serifs.
Using a Sans Serif typeface for a big block of text enhances readability. You can balance this by using a Serif font for the headings. So during your font selection process, choose your sans serif typeface or font first and then find a coordinating serif font. Avoid pairing serifs and sans serif with clashing personalities (e.g. playful with professional, decorative with typeface) as this can convey a conflicting tone to your website. Choose the pairing, based on the tone of your website (e.g. professional, playful, creative).
If you really have a fancy font and you are dying to show it off (i.e. break this rule) then my suggestion would be to use it in unique areas only like Logo or Menu. Stick to the regular fonts for the section headings and blocks of text.
Rule #2 – Varying Font Sizes
Use the font size to show the importance of the content. The golden rule is: the more important the content, the larger the font size. This also means, when you select your font, you must test it out in various sizes so you can get a feel of how it will look in different sizes (Normal and H1 through to H5). From my personal experience, this is usually tricky for the serif fonts; smaller sizes can destroy their beauty sometimes.
Rule #3 – Spacing
Using adequate spacing improves readability. If you cram your webpage with text, it can put off your website visitors. It gives the impression that there is too much content and can be overwhelming. Break down blocks of texts into bullet points or under headings.
Also as you decrease or increase the font sizes, make sure you amend the line heights too. For the default font size, line height should be at least 1.4.
Rule #4 – Minimalistic Font Colours
It is ideal to use either black or white when it comes to blocks of texts (e.g. a blog post). However, use colour fonts for some parts of your website (e.g. Headings, Menu, Logo Text, Hyperlinks). Use contrasting background and font colours to avoid straining the eyes of your website visitors. You can see more about colour choices on my other article about creating a colour palette.
Rule #5 – Responsive Text
In this day and age, where most of the website traffic is through a smartphone or tablet, I am a big advocate of responsive text. There are two aspects to making your website text responsive: resizable text and optimised line lengths.
- Resizable text should automatically resize based on the size of the device screen. But users should also be able to resize the text. This can be achieved through using “em” or “rem”. I recommend using rem units. Given below is a quick example from a sample CSS,
html {
font-size: 100%;
line-height: 1.3;
}
@media all and (min-width: 1200px) {
html {
font-size: 1.5rem;
line-height: 1.4;
}
} - Optimised line length is around 50-75 characters per line. This means keeping the content area smaller and the line lengths shorter even though there may be additional space on the device screen. This can be achieved by setting minimum and maximum break points for text content areas. To avoid a lot of empty spaces, a multi-column view is also a good idea.
BONUS TIP – Go Real!
In the past, when I designed my websites, I usually started off with filler text like “Lorem Ipsum”. But over the years I realised that this does not really work. The dummy text will bear no similarity to the actual content and without some actual content, it is difficult to see how my fonts and styling will look in the final product. You can create a sample typography page where you see all the markups of my theme in one place. I borrowed this from the Theme Test Data recommended by WordPress. Setting up such a template page will help you visualise the various additional styling used e.g. Blockquotes, Dropcaps, Tool Tip. I highly recommend using the Theme Test Data while designing your website theme.
