Nothing will help you become a pro designer faster than working on your typography skills. So let’s see how you can elevate your typography game with few simple tips.
The web is made of text. All the webpages on the world wide web are composed mostly of text. That is not a surprising fact at all but keeping it in mind helps to put things into perspective.
So, if text is the most important part of any webpage, it certainly helps to pay a little more attention to how that text appears on it. That is called typography.
Typography simply refers to the appearance of the text on the page.
Possessing good typography skills is an asset for any designer. Pro designers know that by just paying a little more attention to your typography you can elevate your designs to another level.
So let’s see how you can up your typography game so that your designs look world class too:
Use one font family
Most common advice that we hear is that we should use 2 or 3 fonts at most in our designs. That is true. But using 2 or 3 fonts in a design and balancing them well with each other is a skill that takes time to master. Until then why not play with a single font family in your designs? It is so much easier.
Combining two different fonts is more difficult than using a single font only. A single font makes your designs look consistent out of the box whereas with 2 or more fonts you have to spend some time to figure out the proper combination. Different weights of a single font can be used for different situations. Using only one font in your designs makes sure that you don’t have to make too many design decisions to choose between different fonts at various places on site. It also makes you more efficient.
It forces you to be more creative. Master using a single font in your designs for a while. It would make your designs more coherent & elegant and provide a definite edge to your typography game.
Never use justified text
Browsers never render justified text as expected. They don’t have the necessary algorithms to properly set the spacing between words and even individual letters. Making a text justified might make your designs look coherent in the design software but it never displays like that in real life. In a browser justified text often creates gaps between words and it looks odd.
Reference for this tip: Senior Product Designer at GitLab, Matej Latin refers to this in his thought provoking article on type here.
If there are enough of these gaps in the paragraph, it looks like a “river” of negative space flowing through black text and it makes text hard to read. You don’t want those rivers to run through your copy.
Always use left or right aligned text in your designs. Avoid justified text at all costs until you can control its form on the webpage also via code. If you have to use justified text you can employ the help of hyphenation but I would suggest avoiding the use of justified text at all.
Additional tip: Do pay attention to the rag (the uneven side of the block of text) when you left or right align the text. That side shouldn’t create awkward shapes. You can control this easily in the design software but there is no easy way to control this via CSS in a browser except for hyphenation. But even that doesn’t offer full control.
Avoid fonts with bad kerning
Kerning is thespace between individual characters of a word. To the average kerning might seem like a trivial detail to ignore but to a professional this is a great way to distinguish their headlines, body copy, sub headers etc. Fonts designed by professional artists have good kernig by default and you can use them as such in your designs. But fonts which are available for free on the internet usually come with bad kerning. This makes the letters unevenly spaced and thus make the whole design look unprofessional.
Now, in the grand scheme of things you might say to yourself who would care about spacing between individual letters. But if you want to become a pro designer the devil lies in the details. This meticulous attention to even tiny details is what makes you a professional. So choose fonts which have good kerning and your typography overall would improve to the next level. Or manually adjust the kerning according to context.
Try this cool kerning game to up your kerning skills and have some fun too :).
Fun fact: Do you know what is “Keming”?
It’s a clever pun on kerning. The term “Keming’’ was coined in 2008 by David Friedman as an intentional misspelling of “kerning”, by combining the r and n into an m as an example of improper kerning. So it’s basically bad kerning or when the space between the letters is not adjusted properly. It highlights the effect of bad kerning rather cleverly by showing that it could alter the meaning of the words.
Good vertical rhythm
Vertical rhythm refers to the consistency of vertical space between the elements on the web page. The consistent space i.e. consistent margin/padding between the paragraphs, headings etc gives a sense of order. It provides a visual consistency to the design which makes it look professional and clean.
But why does Vertical rhythm feel so good?
It’s due to the principle of repetition.
What is the principle of repetition?
According to IDX, the principle of Repetition is simply repeating a single element many times (here our repeating element is the consistent vertical space and its multiples) in a design. For example, you could draw a line horizontally and then draw several others next to it.
How do we create a Vertical Rhythm?
To create a vertical rhythm we repeat the consistent spaces between the headings, paragraphs etc. on the webpage. The spaces between different elements are referred to as margins and paddings so we keep the margins/paddings consistent between the elements by following a baseline and baseline grid system.
The baseline is determined by the line-height property of the body text. If the line-height of our body text is 24px then our baseline becomes 24px. And then we can build our baseline grid by setting the vertical space between the elements as multiples of 24px. For e.g. 12px, 24px, 36px, 48px, 60px, 72px..and so on.
We can use the same principles for creating horizontal rhythm as well.
Always use vertical rhythm in your designs to give them that polished look.
Use proper line length
Length of a line of type is also referred to as measure. Improper line lengths result in too long or too short blocks of texts which affects readability. It can even frustrate the user and this in effect can increase the bounce rates on a website. So do pay attention to the lengths of your lines. They should be of appropriate length. Too short lengths will break the flow of the user and too long line lengths would make reading difficult because a user might lose track of the next line of text as he moves his eyes from the earlier line to the next one.
What is the ideal line length then?
For a single column design the optimum measure is considered as 65 characters. A simple formula to find this is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line.
Using proper measure will improve readability as well as give your block of texts an aesthetic appeal as well.
Bonus tip: Yes, you deserve a bonus for reading the article till here. Here’s another tip for you:
Contrast
Always use contrast between different text elements to make your type stand out. For e.g. you can use a heading which is extrabold and then use body text which is light in weight. This will differentiate the elements enough and make your designs more appealing.
Quick summary
Here is the summary of 5 quick tips to become a typography pro:
- Use one font
- Never use justified text
- Avoid fonts with bad kerning
- Maintain good vertical rhythm
- Use proper line length
- Contrast
There you go!
Use these typography tips in your designs to see their quality rise above normal instantly.
Until next time, keep designing 🙂
Thanks for spending your valuable time reading this article! It means a lot. Do share your typography tricks and strategies that you use to create your quality designs.
References for this article:
https://www.smashingmagazine.com/2009/04/8-simple-ways-to-improve-typography-in-your-designs/
https://zellwk.com/blog/why-vertical-rhythms