10 typography tips for beginners

2 years ago   •   5 min read

By Arthur Shefner

I’ve been inspired by so many people at #krupa2019 🤩
We have a HUGE design community! Thanks to @prjctr_kyiv for organization! Many design careers started there, so did my 😊

I decided to collect all the info from the courses and start sharing UI basics. Let’s start from typography!

1. Hierarchy

Just by resizing the elements you can phrase a bold, easy to read copy.
There are numerous ways to establish hierarchy: contrast, color, size, weight, layout. We’ll be discussing all of this, so keep reading 🧐

Example of a text with no hierarchy
Example of a text with hierarchy

2. Readability

The text is readable when it has the following:
– Contrast, especially value contrast (difference in brightness, as opposed to the difference in hue or saturation)
– Appropriate tracking (space between characters)
– Appropriate leading (space between baselines)
– A typeface without bells and whistles
– Sufficient size
– Noise-free background
– White space around

If the text is unreadable, Satan is waiting for you in hell
Readability first, then bells and whistles
Fight for readability in every way possible

3. Color

Don’t use the same or similar colors for text and background. The more visible the text, the faster users are able to scan and read it. The W3C recommends the following contrast ratios for body text and image text:

– Small text should have a contrast ratio of at least 4.5:1 against its background.
– Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
Oversaturated colors can cause a fatal head explosion
Darkening the color decreases the white in it while desaturating the color increases the gray in it.

4. Contrast

When we talk about contrast in typography, it can mean several things:
– Size Contrast
– Weight contrast
– Color contrast
– Tracking contrast
– Style contrast

Try clashing different styles for frivolous typography which doesn’t give a damn. For example, handwritten Script and monumental Slab.

5. Whitespace

Design elements need some air to breathe. Separate the blocks of text by adding the empty (or we say white) space in between them. Mind the margins and stay away from the edges of the image.
Clumping design elements together is easily one of the most common typography mistakes, so be aware of it ☝️

Cluttered designs look ugly
White space is vital for a good typography
Yet another example of how white space helps to keep a design tidy

Quick tip: Use more than two fonts only if you are forced to.

6. Alignment

Be consistent with the alignment. Draw an imaginary grid that sticks on top of your design. Then align the elements according to this grid. Avoid the parts that penetrate the outer walls of the grid. Align the most of the elements to the left, center or right side.
Ask yourself, what would Forrest Gump do? 🤔
Often the simplest solution is the right one. Say, just left-align everything.

Disjoint text is painful to read and has ragged edges or “rags”.
The left-aligned text brings order to this mess

Quick tip: White space is a crucial part of the alignment.

7. How to pair fonts

– Stay away from pairing two Serif typefaces. It’s better to pair Serif and Sans Serif.
– Be careful with the fonts of similar weight. It’s much better to pair super heavy and hairline, than bold and semi-bold.

These fonts are too similar to build a healthy relationship (Vollkorn and Roboto Slab)
Serif and Sans Serif make a good pair (Vollkorn and Raleway)

Other ways of adding much sought-after contrast is tweaking the tracking (space between characters). Or you can try pairing the radically different styles, for example, Sans Serif and Hand-written Script.

8. Consistency

Consistency is gold ⭐️
Be humble, stick with no more than a couple of fonts per image. Limit the cheesy effects like shadows, outlines, and gradients. These self-limitations don’t cripple the creativity as it may seem. On the contrary, they fuel our creativity engine by making us choose wisely. Use repetition and stick to one visual language throughout the design to avoid clashing styles.

Too many effects look cheesy
Stick to one style across all elements

9. Layout

How to master text layout?
– Pick colors that work
– Pair your fonts
– Use headers properly
–️ Karate chop your paragraphs
–️ Use bullet points and numbers
–️ Mix up your content

the text is moved to the background, emphasizing the foreground figure (and 3D depth)

10. Extra variety

As a finishing touch, throw in some extra chocolate chips. It can be anything, as long as it adds to the Oomph factor 🤩
– Labels
– Icons
–️ Lines
–️ Hand-painted elements
–️ Modified symbols (reversed V letter instead of A)
–️ Tiny irregularities (chopped angle, extra dot beneath the I letter)
–️ Use non-textual elements to bring the extra cool to your typography.

Got interested? Just describe your idea and we will get back to you! contact@perpet.io

Follow us:
Facebook Instagram Dribbble Behance

Spread the word

Keep reading