Brand Typography: The Complete Guide
On this page
- What you will learn
- The role of type in a brand
- Typography anatomy basics
- Classifying typefaces
- How to choose a typeface
- Pairing a heading and body face
- Building a type scale
- Using weights well
- Web versus print
- Typography and accessibility
- A worked example: setting up a brand type system
- Documenting type in a brand guide
- Common typography mistakes to avoid
- Type and hierarchy work together
- Spacing is part of typography
- How type interacts with color
- Variable fonts and modern type
- Type across your brand surfaces
- Frequently asked questions
- What is brand typography?
- How many fonts should a brand use?
- What font size should body text be on the web?
- How do I pick a font for my brand?
- What is a type scale?
- Where should I document my brand typography?
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.
| Term | What it means | Why it matters |
|---|---|---|
| x-height | Height of lowercase letters like x and a | Tall x-heights read better at small sizes |
| Counter | The enclosed space inside letters like o and e | Open counters stay legible on screens |
| Ascender | The stroke rising above x-height, as in h and d | Affects line spacing and rhythm |
| Descender | The stroke below the baseline, as in g and p | Influences how tight lines can sit |
| Serif | The small foot at the end of strokes | Defines a major style split |
| Weight | Stroke thickness, from thin to black | Drives 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.
| Need | What to check |
|---|---|
| Weights | At least regular, medium, and bold for hierarchy |
| Legibility | Clear at 14px to 16px body sizes |
| Language | Covers the characters and accents you ship |
| Licensing | Allowed for web, app, and print use |
| Performance | Reasonable 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.
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.
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.
| Step | px | rem | Use |
|---|---|---|---|
| Caption | 12px | 0.75rem | Labels, fine print |
| Small | 14px | 0.875rem | Secondary text |
| Body | 16px | 1rem | Paragraphs |
| H4 | 20px | 1.25rem | Small headings |
| H3 | 25px | 1.563rem | Subsections |
| H2 | 31px | 1.938rem | Section titles |
| H1 | 39px | 2.441rem | Page titles |
| Display | 49px | 3.052rem | Hero 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.
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.
| Factor | Web | |
|---|---|---|
| Units | rem and px | points and picas |
| Min body size | 16px | 9 to 11pt |
| Color model | RGB and hex | CMYK |
| Best faces | Tall x-height, open | Finer detail allowed |
| Loading cost | Matters, keep files lean | Not 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.
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.
- Define the mood. Confident, modern, and warm.
- Pick a primary face. A clean sans with a tall x-height for body and interface.
- Pick a heading face. A characterful serif for headlines, for contrast.
- Set the weights. Regular for body, semibold for small headings, bold for display.
- Build the scale. Use a 1.25 ratio at a 16px base, as in the table above.
- Set line height. Around 1.6 for body and 1.2 for headings.
- Check accessibility. Confirm 16px minimum and 4.5:1 contrast.
- 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 this | Example |
|---|---|
| Typefaces | Heading face and body face, with sources |
| Weights | Regular, semibold, bold, with use notes |
| Scale | Each step in px and rem |
| Line height | 1.6 body, 1.2 headings |
| Pairings | Heading over body shown together |
| Accessibility | Minimum 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.
| Mistake | Why it hurts | Fix |
|---|---|---|
| Too many typefaces | The brand looks disorganized | Stick to two, three at most |
| Body text too small | Hard to read on phones | Keep body at 16px or larger |
| Low contrast text | Excludes many readers | Meet 4.5:1 for normal text |
| No fixed scale | Sizes drift across pages | Pick a scale and reuse it |
| Lines too long | Readers lose their place | Cap 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 role | Suggested color | Why |
|---|---|---|
| Body | Near-black like #1e293b | Maximum readability over long passages |
| Headings | Near-black or brand accent | Strong presence without strain |
| Links and emphasis | Brand indigo #5b5bd6 | Signals action and ties to the brand |
| Secondary text | Mid-gray like #64748b | Recedes 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.
| Surface | Type concern | Tip |
|---|---|---|
| Website | Loading speed, responsiveness | Use variable fonts and a fluid scale |
| Limited font support | Set web-safe fallbacks | |
| Social | Small sizes, varied crops | Favor bold weights and high contrast |
| Higher resolution, CMYK | Allow 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.
Shaheer Malik
Founder of Zepixo — building the whole brand studio in one tab. Try Zepixo →