Brand Identity Design: From Strategy to Visual SystemColor, type and supporting visual systems · Lesson 8 of 18
Brand typography systems
Video lecture
Brand typography systems
The narrated lecture is in production
Every chapter is scripted and ready. Browse the chapters and read the full transcript now — the video will appear here when it’s published.
Chapters
Transcript of the narration, chapter by chapter.
0:00 Brand typography systems
Here's something that surprises people. You can often recognize a brand from its typography alone. Cover the logo on an ad or a website, and the letters still say who it is. That's because consistent type becomes a brand asset, just like color. But it only works if the type system is designed, documented and licensed properly. Otherwise, every deck, website and report uses different fonts, the Arabic looks like an afterthought, and someone gets a letter from a foundry about an unlicensed web font. In this lecture, you'll learn the anatomy of a brand type system, how to choose brand typefaces, how to handle multiple scripts, scales and rules, fallbacks, and licensing. By the end, you'll build a type system that works everywhere.
0:54 Why a type system
Why does a type system matter so much for brands? Because type is everywhere a brand speaks: posts, slides, packaging, signs, the website, the app, invoices and contracts. Without a system, each team picks fonts differently, and the brand fragments. With one, every touchpoint feels like it comes from the same place. Think of a person's handwriting. You recognize a friend's note instantly, whatever they're writing about, because the handwriting is consistent. A type system is the brand's handwriting. Your job is to make it distinctive, legible and available everywhere it needs to be.
1:35 Anatomy
Here's the anatomy of a brand type system. A primary typeface for headlines and brand expression. A secondary typeface for body text, interfaces and long reading. Script companions, like Arabic or Urdu faces, and how they pair. Allowed weights and styles. A named type scale for digital and print. Rules for case, tracking, leading, alignment, emphasis and numerals. And fallbacks, meaning system fonts for places where brand fonts can't load, like email and some documents. Here's the key idea. The system isn't just which fonts. It's how they're used, and what happens when they're missing.
2:16 Choosing brand typefaces
How do you choose brand typefaces? Beyond legibility, tone and pairing, you need distinctiveness, because very common default fonts make a brand look generic. A distinctive headline face, or a customized wordmark, helps recognition. You need range: enough weights for hierarchy across many applications. Language support: all the scripts and characters you need, designed to work together. And licensing for every use: desktop, web, app, video, logo, and number of users. Finally, availability. If non-designers create documents, how will they get the fonts? Shared brand kits in online tools, open-license families, or approved fallbacks. Larger brands sometimes commission a custom typeface. For small brands, a well-chosen licensed family plus a custom wordmark is a smart middle route.
3:07 Multi-script systems
Now multi-script systems, which matter a lot for brands in Pakistan and the Gulf. Choose Latin and Arabic-script faces with compatible weight, contrast and visual size. Some families are designed in both scripts together. Arabic script typically has different vertical proportions, so don't force identical cap heights. Nastaliq, common for Urdu, has a distinctive diagonal flow and needs extra line height. Define bilingual layout rules: which language leads, right alignment for Arabic and Urdu, left for English, and how layouts mirror. And have native readers review, because awkward joins or wrong letterforms damage credibility fast.
3:48 Worked example 1: a food creator
Worked example one, simple. A food creator uses a trendy display font for everything: headlines, recipe steps and captions. The recipe steps are hard to read, and the font has no weights for hierarchy. The type system fixes it. The display font stays for short headlines only, because it's distinctive and fun. A humanist sans with several weights handles recipe steps and captions. The scale sets headlines at sixty-four pixels and steps at thirty-two on social canvases. Rules: sentence case, bold only for ingredient quantities, and tabular numerals for measurements. Now it's still fun and recognizable, but actually usable in a kitchen.
4:32 Worked example 2: a Riyadh firm
Worked example two, a business scenario with illustrative details. A professional-services firm in Riyadh uses five fonts across decks, the website and reports. The Arabic is set in a default system font with mismatched weights, and the website uses a font without a web license. The new system: one Latin serif for headlines, one sans that has a designed Arabic companion with matched color and rhythm, a named scale for digital, print and social, and bilingual layout rules. They complete a licensing matrix and buy the web and app licenses they need. And every template includes a fallback stack, so documents still look tidy when the brand fonts are missing.
5:20 Watch me do it: licensing + fallbacks
Watch me do it. I'm filling in the licensing matrix and fallbacks for a brand. Design team desktop: needed. Three designers plus one freelancer, so four seats. Website: needed, so I check whether the web license is priced by page views, or whether we can self-host an open-license family instead. Mobile app: not yet. Logo use: I check that the license permits it. Video ads: yes, for paid campaigns, so I confirm digital ads are covered. Partner documents: I specify the open-license alternative. Then I write the fallback stacks: the brand serif falling back to Georgia and a generic serif, the brand sans to system UI fonts, and the Arabic face to a widely available Naskh-style font.
6:11 Scale and rules
Let's talk about scale and rules. Define a named scale for digital, based on something like sixteen pixels for body text, and a separate, larger scale for social canvases, because those are scaled down on phones. Then write the rules. Headline case: sentence case often feels more modern and friendly. When uppercase is allowed, usually only short labels. Alignment defaults. One emphasis method, weight or color, not both. And numerals: tabular for tables and prices, so digits line up. Put all of it in a one-page brand type style sheet. That page will save hundreds of small decisions every month.
6:54 Common mistakes
Common mistakes. Using the most common default fonts, so the brand looks generic. Choosing a family without enough weights. Treating Arabic or Urdu as an afterthought. Forcing identical cap heights across scripts. Not checking licenses for web, app, logo and video use. Forgetting fallbacks, so emails and documents break. Letting staff pick their own fonts in office tools. And no written rules, so everyone applies the fonts differently. A licensed, documented, bilingual type system with fallbacks prevents all of these.
7:29 Recap and try this now
Let's recap. Typography is a brand asset, and a type system covers primary and secondary faces, script companions, weights, scales, rules and fallbacks. Choose for distinctiveness, range, language support, licensing and availability. Design multi-script systems together, with bilingual layout rules and native review. Complete a licensing matrix for every use, and write fallback stacks. Try this now. Write a brand type system for a real or fictional bilingual brand: primary and secondary families, allowed weights, a named scale, five rules and fallbacks. Then list the licenses required, using the matrix from the lesson.
Typography is a brand asset
Typefaces can be as recognizable as colors or logos. Consistent brand typography makes every post, slide and web page feel like it comes from the same place — even without a logo.
Anatomy of a brand type system
| Component | Decision |
|---|---|
| Primary typeface | Headlines and brand expression |
| Secondary typeface | Body text, UI, long reading |
| Scripts | Arabic, Urdu or other scripts and their pairings |
| Weights and styles | Which weights are allowed (e.g. Regular, Semibold, Bold) |
| Type scale | Named sizes for digital and print |
| Rules | Case, tracking, leading, alignment, emphasis |
| Fallbacks | System fonts when brand fonts are unavailable (email, some documents) |
Choosing brand typefaces
Beyond the fundamentals (legibility, tone, pairing), brand typography needs:
- Distinctiveness: very common default fonts make a brand look generic. A distinctive headline face — or a customized one — helps recognition.
- Range: enough weights to create hierarchy across many applications.
- Language support: all needed scripts and characters, designed to work together.
- Licensing for every use: desktop (design team), web embedding, app embedding, broadcast/video, logo, and number of users. Commercial licenses differ — budget for them.
- Availability for partners and staff: if non-designers create documents, consider how they will access fonts (shared brand kits in online tools, open-license families, or approved fallbacks).
Custom and bespoke type
Larger brands sometimes commission a custom typeface, which increases distinctiveness and can simplify licensing. For small brands, a sensible middle route is a carefully chosen licensed family plus a custom wordmark in the logo.
Multi-script systems
For brands in Pakistan, the Gulf and beyond:
- Choose Latin and Arabic-script faces with compatible weight, contrast and visual size. Some type families are designed in both scripts together.
- Remember Arabic script is typically set with different vertical proportions; don't force identical cap heights.
- Nastaliq (common for Urdu) has distinctive diagonal flow and needs extra line height.
- Define rules for bilingual layouts: which language leads, alignment (right for Arabic/Urdu, left for English), and how to mirror layouts.
- Have native readers review typography — awkward joins or wrong letterforms damage credibility.
Type scale and rules
Define a named scale that works for both digital and print, for example:
Brand type scale (digital, base 16 px)
display 56 / 60 line-height, Bold, tracking −1%
h1 40 / 48, Bold
h2 32 / 40, Semibold
h3 24 / 32, Semibold
body 16 / 24, Regular
small 14 / 20, Regular
label 12 / 16, Semibold, uppercase, tracking +4%Add social-specific sizes (larger) because canvases are scaled down on phones.
Rules to document:
- Headline case: sentence case or title case? (Sentence case often feels more modern and friendly.)
- When uppercase is allowed (labels, short tags).
- Alignment defaults.
- Emphasis method (weight or color, not both).
- Numerals: lining or old-style; tabular for tables.
Fallback fonts
Email clients, some office documents and certain platforms cannot use custom fonts. Specify fallbacks (for example a widely available system sans-serif) with similar proportions so layouts do not break and the brand still looks tidy.
Worked example: type system for a professional-services firm in Riyadh
- Primary: a contemporary serif for English headlines (authority, editorial feel), paired with a modern Arabic typeface with similar contrast.
- Secondary: a humanist sans in Latin and a matching Arabic sans for body and UI.
- Weights: Regular, Medium, Bold only.
- Rules: sentence case headlines in English; right-aligned Arabic; bilingual documents lead with Arabic on official materials.
- Fallbacks: system sans in email; an open-license serif in office templates.
- Licenses: desktop for five designers, web for the website, app embedding for the client portal.
Common mistakes
- Choosing a font the brand cannot legally use in apps or video.
- Specifying only English typography for a bilingual brand.
- Allowing every weight in a large family, which reduces consistency.
- No fallbacks, causing broken emails and documents.
Hands-on: licensing matrix and fallback stacks
Before you finalize a type system, confirm the license covers every use.
| Use | Needed? | License type to check | Notes |
|---|---|---|---|
| Design team desktop | Yes | Desktop, number of users | Freelancers may need their own seats |
| Website | Yes | Web font (often by page views) | Or self-host an open-license family |
| Mobile app | Maybe | App embedding | Often separate from web |
| Logo / wordmark | Yes | Logo use permitted? | Some licenses restrict or require extra terms |
| Video / broadcast / ads | Maybe | Broadcast or digital ads | Check for paid campaigns |
| Partners and staff documents | Maybe | Open-license family or approved fallback | Non-designers need access |
Fallback stacks keep layouts tidy where brand fonts can't load (email, some office tools):
/* Headline: brand serif, then similar widely available fonts */
--font-headline: "Brand Serif", Georgia, "Times New Roman", serif;
/* Body: brand sans, then system UI fonts */
--font-body: "Brand Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Arabic / Urdu body with explicit fallbacks */
--font-arabic: "Brand Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;Brand type style sheet (template)
PRIMARY (headlines): [family] — weights allowed: Bold, Semibold
SECONDARY (body/UI): [family] — Regular, Medium, Semibold
SCRIPTS: Arabic [family] (Naskh style); Urdu [family] (Nastaliq for social, Naskh for UI)
SCALE (digital): display 56/60 · h1 40/48 · h2 32/40 · body 16/24 · small 14/20 · label 12/16
SCALE (social 1080): display 96 · h1 64 · h2 44 · body 32 · caption 24
RULES: sentence case headlines · one emphasis method · left-align (English), right-align (Arabic/Urdu)
tabular numerals in tables · line height +20% for Nastaliq
FALLBACKS: see stacks above
LICENSES: desktop ✓ web ✓ app ✗ (not needed yet) logo ✓ — owner: [name], renewal: [date]Before/after: a Riyadh professional-services firm
| Before | After | |
|---|---|---|
| Families | Five fonts across decks, website and reports | One Latin serif + one bilingual sans with Arabic companion |
| Arabic | Default system font, mismatched weights | Designed companion with matched color and rhythm |
| Licensing | Web font used without a web license | Licensing matrix completed; web and app licenses purchased |
| Documents | Broke when fonts were missing | Fallback stack specified in templates |
Summary
Treat typography as a brand asset: choose distinctive, legible, well-licensed families that cover all scripts, define a named scale and clear rules, and specify fallbacks for environments where brand fonts cannot load.
Key takeaways
- A brand type system defines primary and secondary faces, script companions, weights, scales, rules and fallbacks.
- Choose for distinctiveness, range, language support, licensing and availability to non-designers.
- Design Latin and Arabic-script type together; Nastaliq needs extra line height and native review.
- Complete a licensing matrix covering desktop, web, app, logo and video use.
- Specify fallback stacks so emails and documents stay tidy when brand fonts can't load.
Check your understanding
Quick questions to lock in the lesson. They don’t count towards your certificate.
Put it into practice
Write a brand type system for a real or fictional bilingual brand: primary and secondary families, allowed weights, a named scale, five rules and fallbacks, and list the licenses required.
Enrol for free to save your progress
Reading is always free. Enrol to keep your place, take the final assessment and earn a verifiable certificate.