Typography

Brand Typography: The Complete Guide

Shaheer Malik14 min read
ZepixoTYPOGRAPHY
Brand Typography: The Complete Guide
On this page

Most brands obsess over their logo and color, then treat type as an afterthought. That is a mistake, because brand typography carries more of your identity than any other element. Every headline, button, and paragraph is set in your typefaces, so type is the voice people read all day long.

This guide is for founders, designers, and marketers who want type that looks intentional and holds up everywhere. I will walk through the role of type in a brand, the anatomy basics you actually need, how to choose and pair typefaces, how to build a scale, how to use weights, the web versus print split, accessibility, and how to document all of it. By the end you will have a system, not a guess.

What you will learn

  • Why typography shapes brand perception more than most teams realize
  • The anatomy and classification terms worth knowing
  • How to choose a primary typeface and pair a heading with a body face
  • How to build a type scale with real px and rem values
  • How to use weights, handle web versus print, and meet accessibility floors
  • How to document type cleanly in a brand guide

The role of type in a brand

Typography is tone of voice made visible. A geometric sans feels modern and efficient, while an old-style serif feels established and trustworthy. Readers absorb that mood before they read a single word, so your typeface is doing work whether you planned it or not.

Type also drives consistency. When every team uses the same faces, weights, and sizes, your brand reads as one coherent thing across a landing page, an email, and an invoice. That repetition builds recognition the same way a consistent color palette does.

Finally, type carries most of your content. Logos appear once per screen, but body text fills the whole page. Getting type right improves readability, trust, and conversion far more than polishing a single mark. For the wider system this lives inside, see our guide on what a brand style guide is.

Typography anatomy basics

You do not need to be a type designer, but a few terms make every later decision easier. These are the parts that affect how a face reads at small sizes and how two faces pair.

TermWhat it meansWhy it matters
x-heightHeight of lowercase letters like x and aTall x-heights read better at small sizes
CounterThe enclosed space inside letters like o and eOpen counters stay legible on screens
AscenderThe stroke rising above x-height, as in h and dAffects line spacing and rhythm
DescenderThe stroke below the baseline, as in g and pInfluences how tight lines can sit
SerifThe small foot at the end of strokesDefines a major style split
WeightStroke thickness, from thin to blackDrives hierarchy and contrast

The single most useful one is x-height. A face with a generous x-height stays readable on phones and at body sizes, which is why so many interface faces share that trait. Keep it in mind whenever you audition a typeface.

Classifying typefaces

Most faces fall into a few families: serif, sans-serif, slab serif, script, and display. Serif and sans-serif do the heavy lifting in branding, while script and display work best for accents. For the deeper split between the two main camps, read our guide on serif versus sans-serif.

How to choose a typeface

Choosing a primary typeface is the highest-leverage type decision you will make. Start from the brand personality, then filter by practical needs. A face can be beautiful and still wrong for the job.

Begin with a short list of traits. Is the brand warm or precise, classic or modern, playful or serious? Then audition faces that match that mood in a real headline and a real paragraph, never in a single perfect word.

NeedWhat to check
WeightsAt least regular, medium, and bold for hierarchy
LegibilityClear at 14px to 16px body sizes
LanguageCovers the characters and accents you ship
LicensingAllowed for web, app, and print use
PerformanceReasonable file size for web loading

For brands building on the web, Google Fonts is the safest starting library because it is free, fast, and broadly licensed. Browse it at fonts.google.com, and see our shortlist in Google Fonts for branding and the best fonts for branding.

Pairing a heading and body face

Most brands use two faces: one for headings and one for body text. The goal is contrast without conflict. The two faces should feel different enough to create hierarchy, yet related enough to feel like one system.

A reliable formula is to pair a characterful heading face with a calm, highly legible body face. The heading sets the tone, while the body disappears so people can read. Below is a worked pairing you can copy.

Built to last, designed to read

A serif headline brings character and authority, while a clean sans body keeps long passages comfortable. The contrast creates clear hierarchy without making the page feel busy.

A serif heading paired with a sans body is a classic, dependable starting point.

If pairing feels overwhelming, start with a superfamily that ships both a serif and a sans, so the shapes already harmonize. For ten ready pairings with examples, see our font pairing for brands guide.

Building a type scale

A type scale is the fixed set of sizes your brand uses, from tiny captions to large display headings. A scale removes guesswork and creates visual rhythm. Instead of inventing a size per element, you pick from the scale.

Most scales use a ratio, where each step multiplies the one below it. A 1.25 ratio, called major third, suits dense interfaces. A 1.333 ratio, called perfect fourth, gives marketing pages more drama. Here is a practical scale at a 16px base.

SteppxremUse
Caption12px0.75remLabels, fine print
Small14px0.875remSecondary text
Body16px1remParagraphs
H420px1.25remSmall headings
H325px1.563remSubsections
H231px1.938remSection titles
H139px2.441remPage titles
Display49px3.052remHero headlines

You can generate and preview a scale like this with the free tool at typescale.com. For the full method, including line height and responsive steps, read our guide on how to build a type scale.

Using weights well

Weight is how you build hierarchy without changing the typeface. A bold heading over a regular paragraph reads as more important instantly. Used well, two or three weights cover almost every need.

Pick a small set and stick to it. A common kit is regular for body, medium for emphasis and small headings, and bold for large headings. Avoid using every weight a family ships, because too many weights blur the hierarchy you are trying to create.

Regular 400 keeps body text calm
Medium 500 adds gentle emphasis
Semibold 600 leads small headings
Bold 700 anchors big headlines
A tight weight ladder builds clear hierarchy from a single typeface.

Web versus print

Type behaves differently on a screen than on paper, so your brand should account for both. Screens are backlit and lower resolution, while print is reflective and sharp. A face that sings in print can feel thin on screen.

For web, favor faces with tall x-heights and open counters, and never set body text below 16px. For print, you can use finer faces and smaller sizes, because the resolution supports them. Many brands keep one type system but adjust sizes and weights per medium.

FactorWebPrint
Unitsrem and pxpoints and picas
Min body size16px9 to 11pt
Color modelRGB and hexCMYK
Best facesTall x-height, openFiner detail allowed
Loading costMatters, keep files leanNot a concern

Typography and accessibility

Accessible type is not optional, it is part of good craft. Three levers matter most: size, contrast, and line length. Get these right and your text serves far more readers.

Keep body text at 16px or larger, and never rely on tiny gray text for important content. For contrast, aim for at least a 4.5:1 ratio between text and background for normal text, which follows the WCAG guidance from the MDN accessibility docs. For line length, target 50 to 75 characters per line so the eye can track comfortably.

Comfortable, about 60 characters
Lines of text that hold around sixty characters let the eye return easily to the next line.
Too long, over 100 characters
Lines that stretch far too wide across the screen make readers lose their place and tire quickly, which quietly hurts comprehension and trust.
Line length shapes readability as much as size and contrast do.

A worked example: setting up a brand type system

Let us build a type system for a fictional studio called Northbeam. Follow the same steps for any brand.

  1. Define the mood. Confident, modern, and warm.
  2. Pick a primary face. A clean sans with a tall x-height for body and interface.
  3. Pick a heading face. A characterful serif for headlines, for contrast.
  4. Set the weights. Regular for body, semibold for small headings, bold for display.
  5. Build the scale. Use a 1.25 ratio at a 16px base, as in the table above.
  6. Set line height. Around 1.6 for body and 1.2 for headings.
  7. Check accessibility. Confirm 16px minimum and 4.5:1 contrast.
  8. Document it. Record faces, weights, sizes, and example pairings in the brand guide.

That sequence turns a vague taste into a repeatable system. Anyone on the team can now set type that looks intentional.

Documenting type in a brand guide

A type system only helps if people can find and follow it. The typography page of your brand guide should make every decision concrete. Write it so a new designer could set a page correctly without asking a question.

Document thisExample
TypefacesHeading face and body face, with sources
WeightsRegular, semibold, bold, with use notes
ScaleEach step in px and rem
Line height1.6 body, 1.2 headings
PairingsHeading over body shown together
AccessibilityMinimum sizes and contrast floors

In Zepixo, the Typography page keeps these specifics next to live examples, so the rule and the proof sit together. Learn how the pages connect in our brand guidelines overview, and how inline editing works in the editing reference.

Ready to build your type page? Open the Zepixo Brand Guidelines workspace and document your typefaces, scale, and pairings from an editable template today.

Common typography mistakes to avoid

Even careful teams trip on the same few issues. Spotting them early keeps your type clean. Here are the ones worth guarding against.

MistakeWhy it hurtsFix
Too many typefacesThe brand looks disorganizedStick to two, three at most
Body text too smallHard to read on phonesKeep body at 16px or larger
Low contrast textExcludes many readersMeet 4.5:1 for normal text
No fixed scaleSizes drift across pagesPick a scale and reuse it
Lines too longReaders lose their placeCap around 50 to 75 characters

The pattern is simple. Limit your faces, respect minimum sizes, keep contrast high, and lock a scale. Those four habits cover most of what goes wrong.

Type and hierarchy work together

Typography is not just which faces you pick, it is how you arrange them. Hierarchy is the order in which the eye moves through a page. Strong hierarchy lets a reader find the headline, the subhead, and the body without thinking.

You build hierarchy from three levers: size, weight, and space. A larger, bolder line reads as more important, and generous space around it signals a new section. When these line up, a page feels calm and easy to scan.

A common failure is using too many levels of hierarchy. If everything is emphasized, nothing is. Aim for three or four clear levels, such as display, heading, subhead, and body, and let the rest be quiet. Restraint is what makes the important parts pop.

Spacing is part of typography

Line height and paragraph spacing shape readability as much as the typeface does. For body text, a line height around 1.5 to 1.6 gives the eye room to track. Headings can sit tighter, around 1.1 to 1.25, because they are short.

Leave clear space between paragraphs so blocks of text breathe. Cramped text feels heavy and tiring, while well-spaced text invites reading. Spacing is the quiet half of good typography that most people never notice when it is right.

How type interacts with color

Type and color are partners, not separate decisions. The color of your text sets contrast, mood, and emphasis. A heading in your brand indigo can guide the eye, while body text stays in a near-black for easy reading.

Be careful with low-contrast text, which looks elegant in a mockup and fails in the real world. Light gray on white may pass a designer's eye but exclude many readers. Always check that your text and background meet the contrast floors covered earlier.

Text roleSuggested colorWhy
BodyNear-black like #1e293bMaximum readability over long passages
HeadingsNear-black or brand accentStrong presence without strain
Links and emphasisBrand indigo #5b5bd6Signals action and ties to the brand
Secondary textMid-gray like #64748bRecedes while staying legible

Variable fonts and modern type

A variable font packs many weights and widths into a single file. Instead of loading separate files for regular, medium, and bold, you load one and set the weight you want. This keeps your type rich while keeping the page fast.

For brands on the web, variable fonts are often the smart default. You get the full weight ladder for hierarchy with a smaller loading cost. Many of the faces on Google Fonts now ship as variable, so the benefit is easy to claim.

The practical takeaway is simple. If a face you like offers a variable version, prefer it. You gain flexibility in your hierarchy and lose almost nothing in performance.

Type across your brand surfaces

Your typography has to work on more than a landing page. It appears in emails, social posts, slide decks, invoices, and print. A type system that ignores these surfaces drifts the moment someone makes a deck.

The fix is to design the system for the hardest surface first, usually the web, then adapt down. Document the faces, the scale, and a few fallbacks for places where your brand font cannot load. Email clients, for example, often need a web-safe fallback like Arial or Georgia.

SurfaceType concernTip
WebsiteLoading speed, responsivenessUse variable fonts and a fluid scale
EmailLimited font supportSet web-safe fallbacks
SocialSmall sizes, varied cropsFavor bold weights and high contrast
PrintHigher resolution, CMYKAllow finer faces and smaller sizes

When your type system anticipates every surface, your brand stays consistent no matter who is making the asset. That consistency is the whole point of documenting type in the first place.

Frequently asked questions

What is brand typography?

Brand typography is the system of typefaces, weights, sizes, and rules a brand uses across every surface. It defines how your text looks and reads, from headlines to fine print. Done well, it makes your brand feel consistent and intentional.

How many fonts should a brand use?

Two is the sweet spot for most brands, one for headings and one for body. Some add a third for accents, but more than that gets messy. Fewer faces, used consistently, almost always look stronger.

What font size should body text be on the web?

Set web body text at 16px or larger as a floor. Smaller text strains readers and hurts accessibility, especially on phones. You can scale up from there, but rarely below.

How do I pick a font for my brand?

Start from the brand personality, then test faces in a real headline and paragraph. Check weights, legibility at body sizes, language coverage, and licensing. Pick the face that fits the mood and the practical needs.

What is a type scale?

A type scale is the fixed set of font sizes your brand uses, usually built on a ratio. It removes guesswork and creates visual rhythm across pages. Our guide on building a type scale walks through the full method.

Where should I document my brand typography?

Document it on the typography page of your brand guide, next to live examples. Record the faces, weights, scale, line height, and pairings. A connected tool like Zepixo keeps those rules and examples in sync.

Get your type system right once, and every page you ship after that reads like one confident brand.

S

Shaheer Malik

Founder of Zepixo — building the whole brand studio in one tab. Try Zepixo →

Related posts