Choosing a brand font by how it looks on a specimen sheet is how you schedule a crisis for next quarter. The decision sequence is legibility first, language coverage second, licensing third, and web performance fourth. That order matches the order in which a production reality will fail you. A face that renders poorly at your body size is dead on arrival. A face that cannot set your Polish or Vietnamese text is dead in two years. A face whose licence forbids your PDF workflow is dead in legal terms. A face whose webfont weights total 500 KB is dead on mobile. Check them in that order, with measurable criteria at each step, and you will have done choosing a brand font properly before you ever debate the colour of its swashes.

Brand Typeface Selection Criteria: Measure Legibility Before You Fall in Love

X-Height And The Counters That Vanish

Legibility is not taste. It is a set of measurements you can take today. The first is x-height, expressed in millimetres at a given point size or as a percentage of the em square. For screen body text, a tall x-height in the 4.5-5.5% range of the font size is the floor below which your 16px paragraphs will start to lose the counters of 'e' and 'a' (Sofie Beier, Reading Letters, 2012). Test your top three candidates at 16px in WOFF2 format, with your actual background colour, and measure the x-height in pixels. A face with a short x-height may pass WCAG 2.2 contrast ratio tests at 4.5:1 yet still fail a readability test because the eye cannot resolve the bowls at that size.

Confusable Characters And Apertures

Second, check the confusable characters: the capital I, lowercase l, and digit 1 must be distinguishable at the size you intend. Many display faces' I-l-1 triplets collapse at 14px. The Flesch-Kincaid readability score of your FAQ copy is irrelevant if the font itself cannot tell an 'I' from an 'l'. Third, look at the apertures. Faces with open apertures (the 'c', 'e', 's' that do not close in) survive anti-aliasing at small sizes better than those with closed counters. Fourth, if the face has an optical size axis (opsz), use the small-size instance for body text and the display instance for headlines; a single static cut of a serif that works at 24px will not necessarily work at 16px. The measurable criterion: render the same 200-word paragraph in each candidate at 16px and 14px, print it at 100% zoom, and rank by how many times you have to re-read a line to parse it. That rank is your legibility score.

A failure case you will hit at 2am during a rebrand: the chosen font has a beautiful x-height but no small caps, and your legal team needs small caps in a footer by morning. Do not switch fonts then. Use a variable font file with a weight axis (wght) to simulate the small-cap weight if the rendering engine supports it, or set a system font stack fallback that matches the x-height and width of your chosen face using the CSS Fonts Module Level 4 'size-adjust' property. The fallback is not a compromise; it is the production plan for every platform that does not ship your webfont.

Multilingual Brand Typography: Glyph Count and Unicode Range Coverage

Unicode Ranges And The Empty-Rectangle Test

Language coverage is a gate, not a preference. List every market you operate in today and every market you will enter in the next three years. For each language, write down the Unicode ranges required: Latin Extended for Vietnamese and Central European, Greek and Cyrillic if you touch Eastern Europe, Hebrew or Arabic if you go East. Then check the glyph count of each font candidate. A font with 400 glyphs may cover Latin Extended but fail on Vietnamese's stacked diacritics; one with 200 will fail on common diacritics like 'é' or 'ü'. The metric is not total glyphs but whether every code point in your required ranges is present. A font that covers 95% of your needs is not a pass; it is a defect you will hit when your translation vendor returns a file with empty rectangles.

The real test is a checklist of your actual content: your product names, your city names, your CEO's surname, and the accented characters they contain. Render them in the font at 16px and look for missing glyph rendering. If you need a font that covers Vietnamese and Latin Extended, your shortlist narrows fast. A font like IBM Plex Sans or Source Sans 3 covers more than 1,000 glyphs and supports Vietnamese out of the box; a display face from a small foundry may not. Do not trust the foundry's marketing copy. Open the font file in a tool like FontForge or use the Google Fonts glyph coverage checker.

When A Missing Glyph Is A Dealbreaker

If you must use a font that lacks the required Unicode range coverage, subset it to include the specific language ranges you need. Subsetting removes glyphs permanently. The better answer is to reject the font. Choosing a brand font that cannot set your upcoming Polish campaign is a decision you will reverse in a year, and the reversal cost, new webfont files, new licensing, new QA, will dwarf any aesthetic benefit.

Font Licensing for Brands: The SIL Open Font License Is Not a Blank Cheque

OFL Rights And The Copyleft Trap

Licensing is where most amateurs get burned, and the burn is financial. The claimed status of a font on an aggregation site, say, Google Fonts listing a face as 'free for commercial use', is not the same as the real licence terms. Google Fonts distributes under the SIL Open Font License 1.1 for most families. The SIL OFL allows use, embedding, and modification, but it carries a copyleft condition: if you modify the font file itself, you must release your derivative under the same licence, and you must not sell the font alone. More critically, the SIL OFL does not grant a separate server licence. If your SaaS application generates PDFs on a server and embeds the font into those PDFs, that embedding is a distribution. The OFL permits it, but if the font is not OFL-licensed, say, a commercial face from a foundry like Monotype, you need a separate server licence for that use case.

The concrete failure: a designer downloads a font from a free-font site, uses it in a marketing PDF, and then the company ships a product with an embedded copy of that font. If the font's licence is not OFL or a permissive one, that PDF is an unlicensed copy. Check the OpenType fsType embedding bit, which lives in the OS/2 table and tells you whether a font may be embedded in a document at all. A value of 0 means unrestricted embedding; a value of 2 means embedding is allowed for preview and print only; a value of 4 means the font is not embeddable. Print that check.

Commercial Foundry Pricing And The Pageview Clause

For commercial foundries, the licensing metrics are explicit and different per usage. A desktop licence grants a number of users or devices. A web font licence is priced by monthly pageviews. An app embedding licence is priced by number of app titles or monthly active users. There is no 'one licence covers all' in the commercial world. If you are paying for a font, ask the foundry for a quote that includes desktop, web, and app embedding, and get the server licence in writing if you generate PDFs. If you are using Google Fonts, check whether the family is SIL OFL or Apache 2.0 licensed; most are OFL, but a few, like Roboto, are Apache 2.0, which has no copyleft. This guide uses a system font stack for that reason.

A real-world trap: you licence a webfont from a foundry that prices by monthly pageviews. Your blog gets 2 million pageviews a month, but your marketing site gets a fraction of that. The foundry charges per domain. If you use the same font on both without a separate licence, you are in breach. Read the licence's definition of 'pageview' and 'domain' before you sign. If the foundry's terms are vague, get it in writing. The SIL OFL has no such metric, but it does require you to include the copyright notice in any distribution, which means your CSS or your webfont delivery service must include the OFL text. Take away one rule: the licence is a contract, and the font's claimed freedom on a download site is not the real term.

Web Font Performance Budget: WOFF2 File Weight and Font-Display CSS

Counting The Weights You Actually Serve

Web performance is the last gate, and it is the one that most brand teams skip until their Lighthouse score hits 40. The budget is simple: measure the total WOFF2 file weight of the weights you actually use, not the full family. A typical brand uses Regular, Italic, Medium, and Bold, four weights. If you are using a static font, each weight is a separate WOFF2 file, and the total for a Latin-only subset is usually 60-120 KB. A variable font file containing the entire wght axis (100-900) and perhaps a wdth axis can be 200-500 KB for Latin. That single variable file replaces all static weights, but it is dead weight if you only use two of its positions. The performance budget is not a fixed number; it is a percentage of your total page budget. If your page is 1 MB of images, 300 KB of webfont is fine. If your page is 50 KB of HTML and CSS, 300 KB of font is a disaster on a 3G connection.

Subset the font to the Unicode ranges you actually use. A Latin-only subset of a large font is typically 30-50 KB per weight in WOFF2. Serve the WOFF2 format only, with the fallback set to a system font stack matched by x-height and width. Use the CSS font-display descriptor with a value of 'swap' so text is visible immediately in a fallback font and swaps to your brand font when it loads. Do not use 'block', which hides text for up to 3 seconds. The failure case: a user on a poor connection sees a blank space where your headline should be because the font-display value is set to 'auto' and the font file is 500 KB. That is a conversion killer.

Throttled Testing And Layout Shift

Measure the real-world page load in a throttled browser. Use the performance tab in DevTools, set the network throttle to 'Fast 3G' and the CPU throttle to 4x. If the total font weight causes the first contentful paint to exceed 2.5 seconds, reduce the number of weights or switch to a variable font with a smaller file size. The claim that one variable file replaces many is true only if you actually use the axes. If you never use the wdth axis, the axis data is dead weight. Use a subsetting tool to strip unused glyphs and axes. This is a legal and financial risk if you are paying per pageview, and a UX risk if you are not.

One more performance trap: the font loading strategy itself. If you load your webfont via a third-party service like Google Fonts, you depend on their uptime and their cookie consent. For a brand site, self-hosting the WOFF2 files is almost always worth the latency cost because you control the font-display behaviour. Use the CSS Fonts Module Level 4 'size-adjust' property to match the fallback font's metrics to your webfont, so the layout shift is minimal. A fallback font that is 30% wider than your brand font will cause a cumulative layout shift (CLS) of 0.3 or more, failing core web vitals. Test the fallback stack in a browser that does not load webfonts, that is, your server-side render or a text browser. If the fallback is unreadable, your brand font is not the problem; your fallback is.

A Practical Checklist for Choosing a Brand Font in Four Steps

The following order is not optional. It maps directly to the four sections above.

Legibility: measure x-height at your body size, verify I/l/1 distinction, check apertures, and pick the optical size axis instance. If the face fails, stop.
Language: write your current and planned content's Unicode ranges, count the glyphs required, and test every code point. If a glyph is missing, stop.
Licensing: read the end-user licence agreement, check the fsType bit, and obtain desktop, web, and server licences for your usage. If you cannot afford it, stop.
Performance: subset to Latin plus your brand's unique ranges, convert to WOFF2, and set font-display: swap. Measure total file weight and CLS. If it exceeds your budget, go back to step 1 with a new candidate.

This sequence is the difference between a font that works and a font that works everywhere you need it to.

If you have a deadline and the normal font licensing route is closed, say, the foundry takes three weeks to issue a quote and your design lock is Friday, do not use the commercial font. Choose an open-source face with a permissive licence like the SIL OFL. Google Fonts hosts over 1,700 families, nearly all under OFL or Apache 2.0. Download the WOFF2 files, self-host them, and you have the same performance and legal clarity as a commercial font, minus the invoice. The failure case is when you are at 11pm and the only font that fits your brand is a commercial one you cannot licence in time. Then you use the system font stack, measure the x-height of your fallback, and adjust the CSS so the fallback matches the commercial face's metrics as closely as possible. It is a failure of planning, and the fallback is the responsible release valve.

Frequently Asked Questions

What is the difference between a font and a typeface? A typeface is the design (the look of the letters); a font is the file or software that delivers that design in a specific weight and style. Choosing a brand font means selecting the files; choosing a brand typeface means selecting the design.

Can I use a font from Adobe Fonts for a client's website? Adobe Fonts allows web embedding for websites under your Creative Cloud subscription, but the licence is tied to your Adobe account. If the client needs to edit or self-host the font, they need their own licence. Check the Adobe Fonts terms, which are unlimited for desktop sync but require pageview-based licensing for web if you exceed Adobe's terms.

What does the fsType embedding bit do? It is an OpenType flag in the OS/2 table that controls whether a font can be embedded in a PDF or other document. A value of 0 allows unrestricted embedding; 2 allows preview and print; 4 disallows embedding. If you embed a font with a 4 in a PDF, the PDF will use a substitute font on another system.

Is a variable font always smaller than a static family? No. A variable font file is larger than a single static weight, but it replaces many static files. If you need only two weights, a variable font with a full 100-900 weight axis can be larger than two separate WOFF2 files. Subset the variable font to the axes and ranges you actually use, or the dead weight costs you performance.

What is the minimum x-height for body text on screen? The research suggests 4.5-5.5% of the font size, but the WCAG 2.2 guidelines specify a contrast ratio, not an x-height. Test your font at 16px with your background colour. If the x-height is below 4.5%, the font is too small in the lowercase, even if the contrast passes.

Can I use a free font for a commercial SaaS product? It depends on the licence. SIL OFL fonts can be used in commercial products, including SaaS, but if you modify the font file, the modified version must also be OFL. Google Fonts' OFL fonts allow embedding in PDFs without a separate server licence, but the OFL requires you to include the copyright notice. Apache 2.0 fonts like Roboto have no copyleft but also require attribution. For any non-OFL free font, assume it is not licensed for commercial use unless the foundry explicitly says so.

This page's single non-replicable sentence is: 'A font that covers 95% of your needs is not a pass; it is a defect you will hit when your translation vendor returns a file with empty rectangles.'

Choosing a Typeface for a Brand by Evaluating Legibility, Licensing, Language Support, and Performance