What Is Typography in Graphic Design?

You might not know the difference between a serif and sans-serif yet, and that’s okay. Maybe you've tried picking fonts and somehow ended up with something that looks like a school project gone rogue. Been there.

The good news? Typography isn’t some mysterious talent. It’s a skill. One you can learn, practice, and actually enjoy.

In this article, we’ll answer “What is typography in graphic design?”, why it matters, and how to start getting better at it, even if right now, you feel totally lost. To make sure you get a clear, no-fluff explanation packed with practical examples, we asked our UI lead at TodayMade, Darina Silchenko, who also has tons of experience teaching graphic design, to share her insights.

Let’s get started with typography definition.

What is typography and an example?

Typography is the way of arranging text so that it's readable, visually appealing, and aligned with the tone of the message. It’s about how words are laid out on a page or screen to create meaning and flow.

Think of a book cover. The title is large and bold, the subtitle smaller and lighter, and the author’s name in a contrasting font. That balance of size, weight, spacing, and style? That’s typography at work.

What is the main purpose of typography?

The main purpose of typography in graphic design is to make written language readable, clear, and visually engaging. It’s not just decoration, it’s communication design at its core.

As one Creative Director on Reddit put it:

“You're in the business of communication. If you can't successfully communicate a message, you can't be a graphic designer.”

Typography in design shapes how people absorb information, feel about a brand, and even whether they stick around or bounce off your design.

Here’s why good typography matters:

• Clarity through legibility and readability. Tiny adjustments, like increasing letter spacing (kerning) or line height (leading), can make text dramatically easier to read. This matters even more in UI design, where a button label that’s 1px off can frustrate users.

• ‍Establishing visual hierarchy. Typography guides your reader through content like a silent tour guide. Size, weight, spacing, all tell users where to look first and what’s most important. This is crucial in editorial design, landing pages, or any interface that needs to deliver information fast.

• Creating brand and emotional tone. Typography isn’t neutral. A single font can signal playful or serious, modern or vintage, cheap or premium. Brands often stick to the same font families across websites, ads, packaging.

• Telling stories and setting the mood. Good typography has an almost invisible magic. A minimalist sans-serif layout feels clean and modern. A decorative serif with generous spacing feels classic and refined. Typography helps tell your story before a single word is read.

• Building trust and credibility. Clean, consistent type makes a design feel intentional and professional. Bad type, like mismatched fonts or weird spacing, instantly screams “inexperienced.”

• Driving action. Whether it’s a call-to-action button, a headline on a poster, or an app menu, typography directly influences behavior. If people can’t read it or don’t like how it looks, they won’t click it.

Typography is everywhere in design. You can’t avoid it, but you can get really good at it.

Understanding the core typography elements

Typography can feel like learning a new language. Between the jargon, historical styles, and invisible rules, it’s easy to feel overwhelmed. But once you get familiar with the core elements, things start to click.

Below, we break down the typography basics in plain English, with practical context and examples to help it stick. 

1. Typeface vs Font vs Typography

First of all, let’s clear up a common source of confusion: typography vs. fonts vs. typefaces.

• A typeface (also called a type family) is the overall design style, like Helvetica, Times New Roman, or Futura.
• A font is a specific style and weight within that typeface, like Helvetica Bold 12pt or Times New Roman Italic 10pt.
• Typography is the craft of using those fonts and typefaces in a thoughtful way.

In short: Typefaces are what you choose. Fonts are what you use. Typography is how you use them.

Once you understand the difference, you’ll start to notice how skilled designers use type to guide your eyes, shape your emotions, and tell stories without saying a word.

2. Serif vs Sans Serif vs Slab Serif

These terms belong to the typeface classification in typographical design, which is based on whether the letter has or doesn’t have a tiny stroke – “serif”. 

Serif

Serifs are the tiny “feet” or strokes at the ends of letterforms. Think Times New Roman or Garamond — classic, bookish, and rooted in tradition. 

Serif fonts are distinguished from each other by the type of stroke.

Each serif style carries its own personality and practical implications:

Here are some good typography examples of using serifs:

Sans serif

Unlike serif fonts, sans serif fonts, also known as “grotesks”, skip decorative endings on their letterforms, giving off a clean, modern vibe.

Here’re some of examples: 

Slab serifs 

They come with bold, blocky endings that feel assertive and great for headlines. Some popular examples are Rockwell or Clarendon.

To sum up, all of the above typefaces aren’t just style choices. Serif fonts tend to feel trustworthy and traditional, perfect for long reads or printed content. Sans serifs are often easier to read on screens. Slab serifs command attention, making them favorites in ads and editorial headlines.

Want to go deeper? Check our blog post on font psychology. 

3. Kerning vs tracking vs leading

Spacing might sound boring, but it’s where bad typography goes to die and great design quietly shines.

• Kerning adjusts the space between individual letter pairs (think: avoiding the awkward gap between “A” and “V”).

• Tracking changes the spacing across an entire word or sentence. If the text is written in all capital letters, it’s better to increase the spacing between them. The right balance between tracking and other typographic factors, such as word spacing, font size, and line height, can improve text readability and make it more visually appealing to readers.

• Leading controls the vertical space between lines of text. In case the leading is too small, the lines of text will be too close to each other, which can create visual clutter and make reading difficult. If the leading is too large, the lines will be spaced too far apart, which can look awkward and untidy.
  
  The average leading for a block of text ranges from 120% to 150%. But it should always be greater than the space between words. Another way to determine leading is to add 10 pixels to the font size. For example, if the font size is 16 pixels, the optimal line spacing would be 26 pixels.

Even subtle tweaks can transform cluttered text into breathable, elegant copy. Especially in UI design or product interfaces, thoughtful spacing makes content digestible and beautiful.

4. Contrast vs Weight

These terms might sound technical, but they all affect how your text feels and how well people read it.

• Contrast is about making things distinct. It refers to how much variation there is between thick and thin parts of a letter. High contrast feels formal and sharp. Low contrast is easier to read in bulk.
• Weight is how thick or light the letter strokes are. Heavier weights pull attention. Lighter ones feel airy.

Together with color and spacing, weight and contrast help build hierarchy in typography, guiding the reader’s eye through the content, indicating the importance of different text elements.

Aperture

Aperture is the opening of letters like “e” and “c.” A narrow aperture can feel stylish but might hurt legibility at small sizes.

Does the font fit your project?

You’ve learned the theory, now it’s time to apply it. Choosing a font for your project can be an important design tool, and there are several key factors to consider:

1. Type of project

Are you designing a website, a logo, a printed brochure, a poster, or an animation? Each format brings its own constraints and expectations. A responsive UI needs clear, readable fonts at small sizes. A logo, on the other hand, might benefit from distinctive, stylized lettering that wouldn’t work well in body text.

2. Audience

Who are you speaking to? If your audience is kids, a bubbly rounded font might feel right at home. A corporate audience? Probably best to keep it classic and professional with a neutral sans-serif or serif. Font personality matters a lot.

3. Style and mood

What kind of mood are you trying to set?

• Want clean and modern? Go for a geometric sans-serif.
• Looking for something more warm or traditional? A serif with soft contrast might be the way to go.

Typography helps establish the emotional tone of your design before anyone even reads a word.

4. Readability

It doesn’t matter how cool a font looks — if people can’t read it, it’s a problem. Make sure your font works well at different sizes, especially for long-form reading. Check letter spacing (tracking), line height, and character distinction (like the difference between capital “I” and lowercase “l”). Some fonts are made for headers, others are built for paragraphs. Know which is which.

Which fonts to get?

Typography trends change quite dynamically, still here’s a list of classy fonts that are likely to work well for most projects.

• Roboto
• Inter
• SF Pro
• Segoe UI
• Droid Sans
• Open Sans
• Aller Sans
• Source Sans Pro
• Nunito Sans
• Proxima Nova
• Azuro
• Avenir
• Gotham
• PT Sans
• Lato
• Lucida Grande
• Verdana
• IBM plex
• Rubik
• Archivo
• Graphik
• Oswald
• Regola
• Fira Sans (a bit narrow, so be careful with it)
• Ubuntu (smoother and rounded).

How to create font pairs

Choosing the right font is one thing. Most probably you’ll want to create font combinations for your project. That’s where things get tricky, but also fun.

To combine fonts wisely, you need to understand their core traits:

• Are they serif or sans serif?
• High contrast or uniform?
• Narrow or wide?
• Neutral or decorative?

The goal is always balance: fonts that look good side by side while maintaining their individual character.

There are three main pairing strategies:

• Contrast pairing. Two fonts that have almost nothing in common — a bold slab serif with a delicate sans serif, for example. The contrast creates visual interest and clearly separates sections of content.

• Similarity pairing. Fonts that are slightly different but share key traits, like similar x-height, stroke width, or rhythm. This makes for a subtle, cohesive look.

• Accent pairing. Fonts that are nearly identical, with one noticeable difference, a quirky “g,” an angled terminal, or a unique serif. It’s minimal, but intentional.

How to make these pairs work

• One font should lead. Choose one typeface to grab attention (for headings or pull quotes), and let the other support it with clean, easy-to-read body text.
• Stick to two. Three fonts might work in rare cases, but most designs thrive on the clarity and simplicity of a two-font system.

Pairing fonts is about contrast with control, making sure they complement each other without fighting for the spotlight.

Where to find fonts (free & paid)

Once you know what you’re looking for, the next step is knowing where to look. Here are solid places to find the right typeface for your project—whether you're on a tight budget or ready to invest in quality:

• Google Fonts – Free, reliable, and web-friendly. Great for UI projects and supports many scripts (including Cyrillic).
• Font Squirrel, 1001 Free Fonts, DaFont, Urban Fonts, FontSpace, Abstract Fonts – A mix of free and freemium options. Always double-check licenses.
• FontStruct – Lets you build your own font from scratch. Also offers a library of user-generated typefaces.
• Fontspring – Paid fonts with fair, easy-to-understand licenses. A great source for commercial use.
• Behance – Many designers post original fonts here, often free for download. Also a great place for inspiration.
• Official Foundries – For high-end professional fonts, check sites like Hoefler&Co, Colophon, Klim, or Commercial Type.

With so many resources to get fonts you may wonder “If there are free and paid fonts, are there any rules or usage restrictions?”

Font licensing

Fonts are not just downloadable assets — they’re intellectual property, and using them incorrectly can lead to legal trouble. Every font comes with a license that defines how you’re allowed to use it.

Here are some key restrictions and conditions you might encounter in a font license.

Common licensing limitations:

1. Scope of use. A license may limit how many users or devices the font can be installed on. Some are single-user only; others allow for teams or enterprise use.
2. Purpose of use. Some fonts are only allowed for personal projects (like a birthday invititation). Others are licensed for commercial use, anything related to business, branding, or profit.
3. Redistribution. Most licenses forbid sharing the font with others or embedding it in projects that allow end users to download or extract it. If you're handing files off to a developer or client, double-check what's allowed.
4. Modification rights. Some licenses let you tweak the font. Others strictly prohibit any alterations — no matter how minor.
5. License duration. Some licenses are permanent, while others are time-limited (e.g., one year, subscription-based).
6. Pricing. Some fonts are completely free (even for commercial use). Others require payment for any use beyond personal projects.

Bottom line:

• Use free fonts for non-commercial or low-risk projects but always check their licenses.
• Buy fonts (with a proper commercial license) when you're working on client project branding, or anything that could involve legal exposure.
• When in doubt, contact the copyright owner or purchase the license directly from a reputable foundry.

Using fonts responsibly not only protects you from legal issues, it also supports the designers who make them.

Practical tips to understanding typography

Ready to put everything into practice? Here are a few quick exercises and habits to build your typography skills and confidence:

• Mockup a real design

Create a simple flyer, poster, or Instagram graphic. Use one expressive display font for the headline, and pair it with a neutral sans-serif for the body. Play with spacing, size, and alignment until it feels balanced.

• Check legibility

Test your design across devices and formats — desktop, mobile, even printed paper. Does it still work at small sizes? Can you tell a capital “I” from a lowercase “l”? These small checks prevent big mistakes.

• Use font pairing tools

There are platforms that offer built-in pairing suggestions and can help you explore combinations and see how fonts behave in headers vs. body text. Some examples: fontpair.co, femmebot, typ.io.

• Ask for feedback

Share your design in a typography subreddit or design Slack group. Ask targeted questions: Is the text easy to read? Does the pairing feel cohesive? Is the tone right for the message?

• Build your own font library

Came across some great graphic design examples? Whenever a font works well, save it. Create a folder with your favorite fonts, license details, and a few screenshots of how you used them. It’ll save you hours on future projects. By the way, you can also learn useful lessons on bad typography examples. 

Educational resources for good typography

If you’re ready to go deeper into the world of typography (or just want to sharpen your eye), here’s a solid starter pack of books, tools, and communities:

Books & sites

• The Elements of Typographic Style by Robert Bringhurst – A timeless, in-depth reference for serious typography nerds. Dense but worth it.
• Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann – A friendly, visual introduction that’s perfect for beginners.
• PracticalTypography.com by Matthew Butterick – Clear, opinionated, and packed with real-world examples. Bonus: it’s free.

Online courses & videos

• The Futur’s Typography Critiques –  Insightful, entertaining, and full of real feedback youtube project on design submissions.
• Skillshare / Domestika / LinkedIn Learning – Great platforms for structured lessons and bite-sized typography exercises—especially helpful if you're building a habit.

Communities & forums

• Reddit. Subs like r/graphic_design and r/typography are great for honest feedback, font recommendations, and industry banter.
• Behance / Dribbble. Explore how other designers use type in real projects — and get inspired by the pairings and layouts they choose.

That’s it for our guide. Hope it was helpful and you’ll start applying your newfound typography knowledge right away. And in case you lack the time or resources to execute it, TodayMade is here to assist. 

We offer a subscription-based design service that provides you with a complete creative team, including illustrators, web designers, animators, and more, for less than the cost of hiring a single in-house designer. Contact us to ensure your marketing campaigns are never held back by design bottlenecks.