Good brand typography is a small, deliberate system, not a favorite font. Pick one primary typeface for headings and one secondary typeface for reading text, give each a clear job, and fix their sizes on a type scale. Then test the pair at small sizes, on screens, under accessibility settings and with the licenses you actually need.
Brand typography is the set of typefaces, sizes, weights and spacing rules a business uses so that every piece of text it publishes looks and reads like the same organization.
What does a brand typography system include?
A working system names each typeface’s role, the weights allowed, a fixed set of sizes, spacing rules and a fallback for when the brand font is unavailable. Google Fonts’ own checklist for choosing type covers purpose, language support, legible details, enough weights and styles, reliable files and the right licenses [Google Fonts, 2022].
A short framework helps here: the Four Jobs test. Before a typeface is approved, it has to pass all four:
- Voice: it sounds like the brand at headline size.
- Reading: it stays comfortable across a full paragraph on a phone.
- Access: it survives resizing and spacing overrides without breaking the layout.
- Rights: the license covers every place the brand will use it.
How do you choose a primary and secondary brand font?
Choose the primary typeface for personality and the secondary for reading, then check that the two differ enough to be useful without clashing. Google Fonts notes that a script face full of flourishes might suit a logo but is unlikely to work for body text [Google Fonts, 2022].
The primary face carries the voice in headings and campaign lines. The secondary face does the heavy work in paragraphs, forms and captions, so it needs a full set of weights, italics and the accented characters your audience actually uses.
For softer, editorial identities, the type choice does a lot of the signaling, as covered in feminine branding. The color half of the same decision is in brand colors and psychology.
How do you pair fonts for a brand?
The safest pairing stays inside one type family or superfamily, where a serif and a sans share the same underlying skeleton. Google Fonts explains that superfamily members share spacing, proportions and motifs, so you can swap between them without disrupting the layout [Google Fonts, 2022].
“The advantage of staying within the family means there’s a shared consistency across every variation.”
Elliot Jay Stocks, Pairing typefaces within a family & superfamily, Google Fonts Knowledge (2022)
Pairing across families works too, but compare x-heights, stroke weight and width first. A quick check: set one sentence in both faces at the same size. If one looks noticeably bigger or darker, the pair will feel uneven wherever they meet.
What is a type scale, and how do you set one?
A type scale is a fixed set of font sizes that relate to each other by a consistent interval, so headings and body text feel related instead of random. Google Fonts describes it as a pre-defined set of intervals and says the important thing is consistency within your system [Google Fonts].
Here is a worked example using a base of 1rem for body text and a ratio of 1.25 between steps:
- Small text and captions: 0.8rem
- Body text: 1rem
- Heading 4: 1.25rem
- Heading 3: 1.563rem
- Heading 2: 1.953rem
- Heading 1: 2.441rem
Each step is the one before multiplied by 1.25. Six sizes cover almost everything a small business publishes. Because rem values follow the reader’s browser text setting, the whole scale grows together when someone needs larger text.
How do you keep brand typography legible at small sizes and on screens?
Favor typefaces with a generous x-height, open shapes and clear spacing, and test them at caption size on a real phone. Google Fonts puts it plainly: when the x-height is large, the typeface will probably be easier to read at small sizes [Google Fonts, 2022].
The same article adds that taller x-heights usually need a little more line height. Hairline weights, tight letter spacing and very condensed widths are the usual casualties on screens: refined at 60 pixels, broken at 12.
Legibility feeds website credibility, and cramped text is a classic sign of an outdated website.
What accessibility rules apply to brand fonts?
WCAG does not set a minimum font size, but it does require that text can be resized up to 200 percent without assistive technology and without loss of content or functionality [W3C].
A second rule, Text Spacing, says no content or function should be lost when a reader overrides spacing to at least 1.5 times the font size for line height, 2 times for paragraph spacing, 0.12 times for letter spacing and 0.16 times for word spacing [W3C].
Worked through for an 18-pixel body size, the layout has to hold up with:
- 27px line height
- 36px space after each paragraph
- 2.16px letter spacing
- 2.88px word spacing
Fixed-height buttons, text inside images and headings squeezed into fixed-width boxes are what usually break.
How do web fonts affect site speed?
Every font file is a download, so the fastest system uses few files, modern formats and a deliberate loading strategy. web.dev’s font guidance recommends WOFF2, preconnecting to third-party font origins, preloading only the most important fonts and subsetting unused glyphs [web.dev, 2022].
Variable fonts help when a brand needs several weights. MDN explains that a variable font holds many variations of a typeface in one file, usually smaller than or about the same size as the four static files often loaded for body copy [MDN].
The font-display setting decides what readers see while the font loads. MDN describes “swap” as an extremely small block period with an infinite swap period, so text appears straight away in a fallback [MDN]. Font loading belongs in the web design plan, not in a fix after launch.
What fallback fonts should a brand specify?
Name a fallback close in x-height and width to your brand font, and size it to match, so the page does not jump when the real font loads. MDN’s size-adjust descriptor exists for this: it can override a fallback font’s metrics to better match the primary web font [MDN].
web.dev adds that if you use “swap”, the font should arrive early to avoid layout shifts [web.dev, 2022].
Do you need a separate license for web, desktop and app fonts?
Often, yes. A retail font license is priced by the volume or kind of use, such as the number of desktop users, the visitors a website serves the font to, or how the font is embedded in an app [Google Fonts]. Google Fonts’ checklist adds that web, desktop, app and ebook use often need different licenses [Google Fonts, 2022].
At Klim Type Foundry, desktop licenses are based on the number of users, web licenses on page views or unique users, and app licenses on monthly active users or total downloads [Klim Type Foundry]. List every channel before approving a brand font.
How Sabrina Awdi builds brand typography systems
I’m Sabrina Awdi, a brand and web designer for women-owned businesses based in Jacksonville, FL, with over 4 years of global experience. I design identities for brands in beauty, food and beverage, software, publishing and professional services, for clients across the US, Europe and the Middle East.
In my brand identity design work, type is never an afterthought to the logo. I explore directions across color, type and imagery, then refine the chosen one into a full system of logo, type and palette. You can see that process in the Literature & Code identity, built on a minimalist visual system, and in the Balance Brightness rebrand, which closed with clear brand guidelines. The logo side of the same thinking is in what a logo has to survive, and type drift is one of the quieter signs a brand is costing you clients.
Outside Jacksonville, the same work is available across Northeast Florida: brand identity design in St. Augustine, Ponte Vedra Beach, Jacksonville Beach, Orange Park and Fernandina Beach.
Frequently asked questions
How many fonts should a brand use?
Two typefaces are enough for most small businesses: one primary face for headings and one secondary face for reading text. A software brand that shows code samples may justify a monospaced third. Every extra family adds files to download, licenses to track and decisions for other people to get wrong. Within those two families, limit the weights too: regular, an italic and one or two heavier weights usually cover everything. Variety should come from the type scale and spacing, not from new fonts.
Can I use free Google Fonts for my brand?
Yes, as long as the license covers how you will use them. Most open source fonts use the SIL Open Font License, which is written for a general audience rather than for lawyers. The trade-off is distinctiveness: a popular free typeface will also appear on many other businesses’ sites. You can still build a recognizable system through careful pairing, weights and a consistent type scale. Keep a copy of each font’s license with the brand files, and remember that “free” describes the price, not the permissions.
What size should body text be on a website?
WCAG does not set a minimum font size, so treat this as a design decision you then test. Pick a body size that reads comfortably on a phone at arm’s length, set it in rem so it follows the reader’s browser setting, and check that the page still works when text is enlarged to 200 percent. Typefaces with a small x-height usually need a larger body size to feel as readable as faces with a tall one. Test on a real phone, not just a desktop monitor.
Decide the type once, then let it work
A brand typography system is mostly invisible when it works. Nobody has to guess which font to use in next month’s flyer.
If your fonts have drifted, or you are starting a new identity, tell me about your brand and we can build a type system that holds up everywhere it appears.
Sources
- W3C. Understanding Success Criterion 1.4.4: Resize Text.
- W3C. Understanding Success Criterion 1.4.12: Text Spacing.
- Google Fonts (2022). A checklist for choosing type.
- Google Fonts (2022). Pairing typefaces within a family & superfamily.
- Google Fonts (2022). Exploring x-height & the em square.
- Google Fonts. Licensing (glossary).
- Google Fonts. Scale (glossary).
- web.dev (2022). Best practices for fonts.
- MDN Web Docs. Variable fonts.
- MDN Web Docs. font-display.
- MDN Web Docs. size-adjust.
- Klim Type Foundry. Font licences.