20 Tips to Improve your Typography Skills

The image displays the text "Type Tips" written in the font "Editorial New" with a glass filter applied to it using Photoshop. The font is centered on a plain black background. This experimental image is used to accompany a blog post titled "20 Tips to Improve your Typography Skills"

By Nine Blaess | 9:54 min

In this article
    Add a header to begin generating the table of contents
    LinkedIn
    Facebook
    Pinterest
    X
    Email

    Have you ever wondered why some designs look so much better than others? Chances are, it’s all in the typography. Well-used typography can significantly enhance the quality and visual appeal of your work. To help you improve your typography skills, I’ve put together 20 practical typography tips you can implement today.

    Whether you are a seasoned professional or just starting out, these tips offer actionable ways to improve your typography skills and take your designs to the next level.

    1. Consider the Audience

    Typography is not just about selecting the right font or text size; it conveys the right message and emotions.

    That’s why it’s so important to consider the audience you’re designing for.

    The fonts you choose can hugely impact people’s feelings about your design. For example, sans-serif fonts give off a modern and sleek vibe, while serif fonts feel more traditional and refined.

    Likewise, an extra-large headline can feel cutting-edge and experimental, which could be perfect for an architectural firm. But for a medical design, you might want to pick more modest font sizes.

    2. Choose Professionally Designed Fonts

    Professionally designed fonts are designed by experienced type designers and offer a wide range of styles and weights. They go through a higher level of quality control to ensure consistency and readability across different platforms and devices.

    Would you like some inspiration on which fonts to use? Check out my monthly font fix for February and March.

    Design tip

    Many professional type-foundries offer free trial versions for designers. You can use this opportunity to experiment with different fonts.

    3. Apply Hierarchy

    Every design needs a clear information hierarchy to avoid overwhelming the viewer with too much information.

    One way to achieve this is using different font sizes, styles and colours. This will direct the reader’s eye and highlight the most important information.

    I love how simple yet effective this website hero image by MyMind is.

    Screenshot from MyMind website illustrating the importance of clear hierarchy in design. The image shows a layout with multiple elements arranged in a hierarchical manner, with a clear indication of which element should be noticed first, second and third. This image is relevant to the topic of typography tips.
    Image source: MyMind website, mymind.com

    Design tip

    Ask yourself what information the reader should perceive first, second, and third… then start designing.

    4. Use Grid Systems

    Grids are a framework of columns and rows that create a structure for organising your content.

    They help align text and images consistently and orderly.

    There are different types of grids, such as:

    • the manuscript grid,
    • the column grid,
    • the modular grid,
    • the baseline grid,
    • and the hierarchical grid.

    Depending on the application, some grids are more suitable than others. For example, a manuscript grid is often used for book layouts, while a column grid works well for web designs.

    Typography tips: On the left side of the image, there is a design layout displayed using a modular grid system. On the right side, there is an overlay that shows the grid lines used in the design.
    Modular grid system explained

    Design tip

    Take some time and experiment with different grid types to see which one works best for your project.

    5. Break Out from the Grid

    I know! I just told you to use grids, and now I’m telling you to break out of them.

    Grids can be valuable tools for creating a structured layout.

    Yet, if you stick too closely to the grid, your design can become too rigid and predictable. Breaking the grid can add a surprising element to your design, making it more dynamic and appealing.

    Design tip

    Like everything in design, don’t overdo it. Just one or two elements breaking the grid is often enough to create a sense of tension.

    6. Don’t Mix Too Many Font Styles

    When choosing fonts for your design, less is often more.

    If you use too many different fonts, your design can quickly become cluttered and unprofessional. “No more than three” is a good rule of thumb when combining fonts.

    Design Tip

    Fonts that are too similar don’t go well together. Try to create contrast by combining a serif font with a sans serif font, for example.

    In my article on brand fonts, you will find more tips on combining fonts.

    7. Use Contrast

    I have just touched on contrast before. You can create contrast by combining fonts or using different font sizes, colours, and weights (e.g., bold vs. light). Contrast helps create a clear information hierarchy and directs the reader’s eye.

    One example I like is from the German chocolate company Jokolade. They placed a colourful shape beneath the typography to make the text stand out.

    A screenshot from the Jokolade website showcasing effective use of color to direct attention to typography. The screenshot features a chocolate packaging where information is placed on a bright yellow lemon to stand out.
    Image source: Jokolade Website, www.jokolade.de

    Design Tip

    As you see, contrast can be created not only through typography but also through the use of other design elements such as shapes, images, and colours.

    8. Use Whitespace

    As beginners, we often neglect white space. But you don’t have to fill every inch with text or images. Usually, less is more.

    White space is the space around your design elements. If you use it intentionally, you can create a sense of balance and draw the reader’s eye to the elements you want them to notice.

    For example, look at how Aesop uses remarkably few design elements.

    The Aesop website is an example of effective use of white space. The website features an off-white background with large amounts of negative space, creating a clean and minimalist look.
    Image source: Aesop website, www.aesop.com

    Design tip

    Try to remove everything that is unnecessary to communicating your message. Then, slowly introduce more design elements.

    9. Avoid Pure Black and White

    Did you know that pure black and white don’t exist in nature? Everything reflects subtle hints of the colours around it.

    Sure, contrast matters. But especially for websites, using pure black text on a white background can quickly strain the eyes.

    Take my website as an example. The black I use is #0D0E11, and the white is #FFFEFD. Hard to notice. But it does make a difference.

    Design tip

    Try experimenting with different shades and hues to find the right balance for your design. Trust me, your audience will thank you for it.

    10. Balance Type Elements Optically, Not Mathematically

    Instead of aligning text mathematically, you should always align it optically.

    Type designers use optical tricks to make letters appear balanced and pleasing to the eye. Why should font placement be any different?

    Precise measurement doesn’t automatically feel balanced. Check out these examples to see what I mean.

    An image with two halves side by side, both showing the word 'focus' in white on a black background. The left half of the image has the word optically aligned, while the right half of the image has the word mathematically aligned. The alignment differences are not visually apparent.
    Comparison: The word on the left is optically aligned, the word on the right mathematically

    Design tip

    Trust your instincts and optically align text until it feels right.

    11. Use a Type Scale

    A type scale can help you determine the size of headings, subheadings, and other text elements. This creates a visual hierarchy and makes your content easier to read.

    Start by setting a font size for your body text, then use a specific scale to determine the size of all other text elements. Popular ratios include the golden ratio or the modular scale.

    Screenshot of typescale.com

    Design tip

    Check out typescale.com for a handy tool that calculates font sizes for you. But don’t be afraid to adjust the sizes if they don’t feel right optically.

    12. Use Display Fonts for Headlines

    Display fonts are specifically designed to look sophisticated and elegant, which makes them the perfect choice for headlines.

    With their bolder strokes and more intricate details, display fonts can add a refined touch to your designs. But remember to use display fonts only for large text, as they become illegible in smaller sizes.

    Also, beware when choosing fonts for a website. Each font installed can increase the loading time, leading to slower page speeds.

    So, while it’s great to aim for elegance in your typography, it’s also important to consider practical considerations. In some cases, faster loading times might outweigh the benefits of using a particular font.

    Below is an example of the font Freight Display Pro by Cindy Hernandez. Do you notice the delicate details?

    Image of Cindy Hernandez's portfolio website featuring an example of a display font in use. The font is black and displayed on a vibrant purple background.
    The portfolio of Cindy Hernandez features the font Freight Text Display, source: www.cindy.works

    Design Tip

    Display fonts are usually called something with Display but may also go by Headline, Banner, Poster or other names.

    13. Adjust the Leading

    Leading, or line spacing, is the vertical distance between lines of text. Choosing appropriate line spacing is crucial for ensuring that the text is legible.

    The ideal leading strikes a balance between being neither tight nor loose.

    Line spacing is influenced by various factors, such as font type, size, and line length. Longer lines generally require larger spacing than shorter lines, and headings need smaller spacing than body text.

    Design tip

    Generally, a leading value of 1.2 to 1.5 times the font size is a good starting point.

    14. Use Lead Paragraphs

    Lead paragraphs are short, eye-catching summaries placed at the beginning of an article. They are designed to grab attention and give your reader a quick overview of what’s to come.

    Lead paragraphs are especially useful for the web, where people tend to skim content. In this case, a lead paragraph can entice readers to delve deeper into an article, even if they’re short on time.

    Plus, they can be a valuable tool for people to share content without reading the whole piece.

    Screenshot of a lead paragraph example from the 'It's Nice That' website. The image shows a title with an accompanying image, and the lead paragraph placed underneath the title. The lead paragraph is set in a larger size than the content.
    Article on It’s Nice That, source: https://www.itsnicethat.com/articles/onnff-aicocken-profile-graphic-design-

    Design tip

    Make your lead paragraphs stand out. Use a larger font size or a different font, or start with all caps or a drop capital.

    15. Use Low-Stroke-Contrast Fonts for Body Text

    When designing for accessibility (or anyone), make your body text as easily read as possible.

    Stroke contrast is one factor to consider. If you go for a typeface with high stroke contrast, such as Bodoni, its thin and delicate strokes fade away in small sizes, making it difficult to read. 

    16. Use Fonts With a Larger X-Height for Body Text

    Another factor to consider is the x-height of the font you choose. Fonts with a larger x-height give more room for the spaces within the letters like e and o (apertures and counters), making them easier to read.

    Be careful not to choose fonts with an x-height that’s too large, either.

    We read by recognising word shapes rather than individual letters, and too large x-heights can make it harder to make out these shapes.

    Design Tip

    Choose a font with the word text in its name to be safe.

    17. Use Italics Rather Than Bold to Highlight Text

    Many people, including some of my clients, emphasise words on their websites by making them bold.

    It makes me cringe, as this makes the text harder to read.

    When certain words stand out too much, it can cause the reader’s eyes to jump around the page, making it hard to focus on something.

    I recommend using italics instead of bold to highlight. This way, the emphasis is more subtle, and the reader can easily absorb the message without distractions.

    18. Pay Attention to Kerning

    Kerning is about adjusting the spacing between letters to improve the appearance and readability of the text. This is particularly important in logo design or headlines, for example.

    Good kerning results in a balanced and uniform typography, while poor kerning can result in awkward spacing that detracts from reading.

    An illustration depicting two words, one on the left and one on the right, with an arrow pointing from left to right. The word on the left appears with irregular spacing between the letters, while the word on the right has uniform spacing between the letters. This is called kerning. Typography tip: kern your headlines

    Design Tip

    If you want to practice your kerning skills, check out this kerning game.

    19. Use OpenType Features and Glyphs

    Check out the OpenType features and glyphs. They can quickly enhance your design and offer a variety of features, such as ligatures, alternate characters, and small caps.

    Ligatures, for example, are combinations of two or more letterforms that blend seamlessly to create a more appealing image.

    Design Tip

    To access the OpenType features and glyphs panel in Illustrator, go to the “Window” menu and select “Type > OpenType” or “Type > Glyphs.”

    20. Use Proper Punctuation

    Precise punctuation is an essential aspect of good typography. Proper punctuation helps prevent confusion and ensures your message is conveyed clearly.

    Make sure you use punctuation marks such as commas, hyphens, and dashes correctly and with the appropriate spacing.

    Want to improve your punctuation straight away? Here is a brief list of the most commonly confused punctuation marks:

    • Use a Hyphen (-) to join two or more words to form a compound word or to break words at the end of a line.​
    • Use an En Dash (–) to indicate a range of numbers or to connect two related words.​
    • Use an Em Dash (—) to indicate a break in thought or sentence structure or to set off parenthetical statements.​
    • Use a Midpoint (·) instead of bullets to separate a list.
    • Use proper quotation marks (“ ”​)​ to indicate a direct quotation or a word or phrase used in a specific sense.​
    • Use an Apostrophe (’) to indicate the possessive case of a noun or to show the omission of letters in a word.​
    • Use an Ellispes (…) to indicate the omission of words or to suggest a trailing off of thought.​
    • Use the correct symbols, such as ½ instead of 1/2.

    Conclusion: How to Improve your Typography Skills

    Typography plays an essential role in the success of any design. In this blog post, we discuss 20 tips for improving your typography skills.

    Let’s recap again.

    You understood the importance of knowing the audience for whom you’re designing.

    You learned that a clear information hierarchy is essential to quickly and visually appealingly convey information. 

    To achieve hierarchy effectively, consider these tips:

    • Leave enough white space
    • Use grid systems to align text
    • Add contrast through font pairing, colour, or size
    • Use a type scale to create harmonious sizes for your headlines

    But when trying to create a hierarchy, beware:

    • Don’t mix too many fonts
    • Break out from the grid once in a while to create tension

    You learned that it’s especially important to pay attention to readability when it comes to body text and website designs. Here are some tips:

    • Adjust the leading
    • Use a low-stroke-contrast font for body text
    • Use fonts with a larger x-height for body text
    • Use italics to highlight text rather than bold

    You understood how details make all the difference when it comes to mastering typography:

    • Pay attention to kerning
    • Use OpenType features and glyphs
    • Avoid pure black and pure white
    • Use display fonts for headlines
    • Balance type elements optically, not mathematically
    • Use proper punctuation

    Finally, you learned that professionally designed typefaces come with more styles and higher quality control. This gives you more flexibility and improves the readability of the text.

    Follow these typography tips to take your typography skills to the next level, and your designs will improve significantly.

    Are you interested in improving your typography skills even further?

    Numerous books and courses offer an excellent way to delve deeper into the subject.

    A valuable resource is also The Flawless Typography Checklist by Typewolf, which synthesises insights and expertise from various sources.

    And finally: practise, practise, practise! This article outlines eight cutting-edge font trends that might inspire you.

    You may also find my curation of branding resources helpful.

    Picture of Nine Blaess

    Nine Blaess

    Hello, I’m Nine. I blend strategy and design to craft engaging brand identities and websites that celebrate the uniqueness of each business.

    Sign up for my newsletter and get my hands-on Brand Storytelling Workbook in return.

    Brand Storytelling Workbook Mockup

    Join my newsletter!

    Receive regular branding updates and claim your free Brand Storytelling workbook.