How to create a systematic typography framework that scales across your export brand's website, print materials, and product packaging.
A Philippine food exporter had different people creating different materials — a website designer who chose one font, a packaging designer who chose another, a sales manager who used a third font in proposal documents, and a social media person who used whatever looked good on Canva. The brand appeared in four different typefaces across four touchpoints. To buyers, it felt like four different companies. The brand had no type system — just a collection of fonts chosen by whoever created each piece of content.
A type system is a complete framework that defines exactly which fonts, sizes, weights, and styles to use for every type of content across every medium. It eliminates font chaos and ensures that whether a buyer sees your website, a product label, a trade show banner, or a proposal PDF, the typography feels consistent and professional. For exporters with multiple team members and partners creating content, a type system is essential for brand consistency.
A complete type system defines three layers. The type palette specifies which fonts you use and for what purpose — typically a primary font for headings and display text, a secondary font for body text, and optionally a third font for special uses. The size scale is a set of predefined font sizes that create a clear hierarchy — typically 6-8 sizes ranging from small captions to large headlines, each with a specific purpose. The spacing system defines consistent margins, padding, and line heights that work with your font sizes to create rhythm across your designs.
Create a type scale using a modular scale — a sequence of sizes based on a ratio (typically 1.25 or 1.333). For example, if your base body text is 16px, a 1.25 scale gives you: 16px (body), 20px (H5), 25px (H4), 31px (H3), 39px (H2), 49px (H1), and 61px (display). Each size has a specific role: body text for paragraphs, H1 for page titles, H2 for section headings, H3 for subsection headings, and so on. A modular scale ensures visual harmony — each size relates mathematically to the others, creating a rhythm that feels intentional.
Document your type system in a clear, visual format. Create a type specimen page that shows every text style with its specification: font family, weight, size, line height, letter spacing, and when to use it. Include examples of correct and incorrect usage. For example: "H1: Space Grotesk Bold, 49px/1.1, -0.02em letter spacing. Use once per page for the page title. Do not use H1 style for subheadings or body text." Visual documentation is much more useful than a text-only specification.
Design your type system for digital first, then extend to print. Most buyers encounter your brand on a screen before they see it in print, so the digital experience should be primary. For digital, use relative units (rem or em) rather than fixed pixels so your typography scales correctly across devices. Set responsive breakpoints where your type scale adjusts — typically one scale for desktop (larger sizes), one for tablet, and one for mobile (smaller sizes but maintain hierarchy).
For digital type systems, performance matters. Each web font you use adds to your page load time. Limit yourself to two font families and 3-4 font weights per family. Use font-display: swap in your CSS to ensure text remains visible during font loading — this prevents the invisible text problem where content is hidden while fonts load, which damages the user experience and your Core Web Vitals scores. Consider self-hosting your fonts for better performance and control.
Include dark mode considerations in your type system. On dark backgrounds, slightly reduce font weight (bold becomes semibold, regular becomes light) because white text on black appears heavier than black text on white. Increase letter spacing slightly for improved legibility on dark backgrounds. These adjustments ensure your typography feels consistent regardless of the background colour.
Print typography has different requirements than digital. For print, you need commercial font licences (most web fonts do not permit printing use), CMYK equivalents of your digital colours, and larger size ranges for different print formats (a billboard headline may be 200pt while a business card may be 8pt). Document print-specific font sizes for common formats: business cards, letterhead, brochures, flyers, product labels, and trade show banners.
For packaging specifically, consider legibility at a distance (supermarket shelf), on curved surfaces (bottles, cans), in small sizes (ingredient lists), and in low-contrast situations (translucent packaging, coloured materials). Your packaging type specifications may differ significantly from your digital specifications while using the same fonts. Document these separately so packaging designers have clear guidance without referring to web specifications that do not apply.
The fonts should be the same, but the specifications will differ. Screen rendering and print rendering are fundamentally different: screens use RGB light at 72-150 DPI, while print uses CMYK ink at 300 DPI. Font sizes that work on screen (16px body text) are too small for print. Line spacing that works in digital may feel cramped in print. Create a unified type palette (same fonts) but separate size scales and spacing systems for digital and print, and document both in your brand guidelines.
Make compliance easy by providing templates that have the type system built in. Create branded templates for PowerPoint/Google Slides, Word/Google Docs, Canva, and any other tools your team uses. When the type system is pre-loaded in templates, people follow it without thinking. For designers and external partners, provide your complete type system documentation in a format they can import (CSS for web, InDesign paragraph styles for print, Figma text styles for design). The easier you make it to follow the system, the more consistently it will be used.
Yes — every font stack in your type system should include fallback fonts. The standard format: "Primary Font", "Fallback Font", generic-family. For example: font-family: "Space Grotesk", "Arial", sans-serif. The fallback font should have similar proportions to your primary font so the layout does not break if the primary font fails to load. For body text, use common system fonts as fallbacks (Arial, Helvetica, Georgia). For display fonts, the fallback is less critical since layout is less dependent on exact character widths.