10 Typography and Design Tips for Beginners

9

    Get the Typography Geekmaster achievement by following these 10 typography and design rules for beginners.

    Typography and design is ingrained in our lives. Whenever you create a thumbnail for your new Youtube video, or design a wedding postcard, or post a demotivator to Instagram. Why not take it to the next level? There is a handful of typography best practices, so let’s take the full advantage of them.

    Initially I’ve been writing this list for my friend Eugene, but then I thought that it will be useful to all other nerds across the globe.

    So before we get started, feel free to retweet.

    1. Hierarchy

    Establish a visual hierarchy to make text scannable. Ask these questions. What’s the key part? What part of the message should really pop? In what order do I want this to be read? How can I make it easier for the reader?

    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.

    typography tutorial hierarchy

    Example of a text with no hierarchy

    typography design tutorial

    Example of a text with hierarchy

    typography tutorial hierarchy

    Even more straight-in-your-face typography

    2. How to Pair Fonts

    Pairing fonts is part technical and part intuitive process, just like art. Let’s say that contrast is the glue that holds two fonts together. If the fonts are too similar, it requires a lot of brain power to spot these tiny differences. It’s uncomfortable.

    So, our eyes hate ambiguity and love contrast.

    Now what does it mean?

    1. Stay away from pairing two Serif typefaces. It’s better to pair Serif and Sans Serif (the one with the serifs, and the one without).

    2. Be careful with the fonts of a similar weight. It’s much better to pair super heavy and hairline, than bold and semi-bold.

    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.

    Useful Link: Mixfont, a modern AI-based font pairing generator

    how to combine fonts

    These fonts are too similar to build a healthy relationship (Vollkorn and Roboto Slab)

    typography how to pair fonts

    Serif and Sans Serif make a good pair (Vollkorn and Raleway)

    text design tutorial

    Sans Serif and Display fonts are looking great together (Raleway and Lobster)

    how to choose fonts

    You see two fonts from the Oswald family, but of the different weights. It’s a good pair

    3. White Space

    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.

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

    typography tips

    Cluttered designs look ugly

    typography tutorial white space

    White space is vital for a good typography

    design tutorial

    Yet another example of how white space helps to keep a design tidy

    typography tutorial white space

    Each element should have breathing space

    4. Alignment

    For easy reading, make sure your text is aligned in an orderly way. A good way to approach it is to group the elements based on their logical relationship. A header and a subtitle can be put together while the social media links can be merged into their own block.

    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.

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

    text layout in typography

    Disjoint text is painful to read and has ragged edges or “rags”.

    typography layout

    Center-aligned text brings order to this mess

    align text typography

    Note how two elements use the same alignment rules

    5. Readability

    The point of typography is to make the copy readable, not only fancy. Who wants to stare at gobbledygook (well, exceptions matter, but anyway)?

    But what does readable mean?

    The text is readable when it has the following:

    1. Contrast, especially value contrast (difference in brightness, as opposed to difference in hue or saturation)

    2. Appropriate tracking (space between characters)

    3. Appropriate leading (space between baselines)

    4. A typeface without bells and whistles

    5. Sufficient size

    6. Noise-free background

    7. White space around

    typography tutorial readability

    If the text is unreadable, Satan is awaiting for you in hell

    typography tutorial readability

    Readability first, then bells and whistles

    typography tutorial readability

    Fight for readability in every way possible

    6. Color

    If you want to succeed in typography, learn the basics of color theory. What does it take to harmonize two colors? What is complimentary contrast?

    There are many websites that’ll help you to fast-track your color education.

    1. Say, you can visit Adobe Color CC, choose the complimentary color rule and it will show the perfectly matched pair of complimentary colors. Like the Teal and Mustard in the second example below.

    2. Or you can go to ColorHunt.co and pick from gazillions of color schemes approved by the color loving community.

    Oh, and oversaturated colors cause ringing effect and probably even death.

    Quick tip: often, Light-Dark contrast between the text and the background is what makes the text readable. Saturation contrast is in the second strong. Hue contrast is the weakest, especially for color-blind people.

    color in design

    Oversaturated colors can cause a fatal head explosion

    color harmony typography

    Complimentary contrast —two colors from the opposite sides of the color wheel (teal and sandy)

    typography tutorial colors

    Compound color harmony — uses the additional color adjacent to complimentary

    typography tutorial text color

    Monochromatic — color are derived from a single base hue (pale green)

    7. Contrast

    We’ve already been talking about contrast. It makes things pop, it harmonizes different fonts, it makes the text enjoyable to read.

    In typography, there are at least five different types of contrast that we should be aware of. Let’s name them.

    1. Size Contrast

    The easiest way to draw attention to an element is to make it bigger, while shrinking all other elements.

    typography tutorial

    Be bold with your letters

    2. Weight contrast

    Many font families like Lato allow you to choose from different weights, starting at hairline and moving to extra heavy (with 4-7 stops in between).

    typography tips font weight

    Try using the fonts from one family, but with the contrasted weights (Quicksand Bold and Light)

    3. Color contrast

    In creative typography, color contrast is your friend. We can split it into three contrasts: by value, saturation and hue.

    Arguably, the most prominent one is value contrast aka Light-Dark. It renders things readable and vice versa.

    Another contrast we can use is saturation, imagine the difference between the sunset red and the pale shrimpy pink for example.

    The hue contrast tells us how far apart are the colors on the color wheel. It’s less intensive then the Light-Dark contrast.

    typography color contrast

    4. Tracking contrast

    One less common way of adding contrast is to play with tracking.

    typography tips text

    Tracking is simply letter spacing. Don’t EVER stretch the text

    5. Style contrast

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

    typography how to choose fonts

    Two styles of Nexa Rust font is clashing here (in a good sense): Script and Slab Black Shadow

    8. Layout

    Text layout in typography is how you arrange the text on the page (or rather in the image). Pretty wide definition? You bet!

    Picture this. You‘re looking at this Gleb’s photo and weighting different possibilities in your mind. Hmm, where do I want to place the text? Do I want it to flow around the Gleb’s left shoulder?

    Or maybe I want to slap it up the back plate? So it kind of stays behind the figure?

    Or just arrange it in a simple text box?

    This is layout. It’s a good practice to make sure it plays with the image somehow.

    layout design tutorial

    Layout #1: the text flows around the shoulder, building a visual relationship with the model

    text layout design

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

    typography layout

    Layout #3: more pseudo-3D trickery

    9. Consistency

    As any typography nerd will tell you, 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.

    And finally, keep it simple stupid (KISS).

    typography tips

    Too many effects look cheesy

    design tutorial

    Stick to one style across all elements

    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:

    1. Labels

    2. Icons

    3. Lines

    4. Hand-painted elements

    5. Modified symbols (reversed V letter instead of A)

    6. Tiny irregularities (chopped angle, extra dot beneath the I letter)

    7. Use non-textual elements to bring the extra cool to your typography.

    typography tutorial

    Raw typography without the extra details

    typography tutorial

    Typography with the weird extras added

    typography tutorial

    Even more extras… and a typography infographics!

    Over to You

    Now Eugene should be well equipped to storm the typography front door. What a shame he’s lazy as hell, but other than that a good fellow.

    Thanks for scanning through this typography tutorial. Now test these tips by making some fancy thumbnail, flyer or postcard!

    Also if you wonder what are the fonts that I used, here is a list (all of these fonts are free for personal and commercial use): Lato, Roboto, Roboto Slab, Vollkorn, Nexa Rust Free, Ultra, Impact Label, Lobster, Oswald and Raleway.

    If you know someone who may benefit from these typography tips for beginners, drop them a line! And better yet, share it on your Facebook and Twitter now. I’m dying to see this post getting 1000 shares and 1mln views!

    • Awesome, thanks Gleb!

      • thank you Abraham! Now do you feel motivated to put together some poster or flyer? 😉

        • Oh yes it does! I am actually going to a design college this fall, so I am going to creating lots of typography! 😀

          • Reda Lamine

            Awsooome Abraham good luck with that if you need anything let me now please 🙂

    • Good stuff Gleb. Design is such a fun topic to explore. 🙂

      • Design is a kind of an all-encompasing mega topic. we can probably record a gazillion tutorials and still barely scratch the surface. Lots of exploration! the uncharted territory.

    • jose betancur

      Awesome Gleb! thanks for this tips, it would be awesome to see a typo tut for blender 😀

    • Awdie

      Thanks! This is awesome

    • Reda Lamine

      Hello Gleb I really liked the video I’m a digital artist I’ve used a lof of fonts when I was in school 🙂 folks if you need more tips for typography I can help you with few knowledge I’ve learned
      Note: I am not a professional I just love sharing and exchange knowledge with all of you SHRMIPERS 😀