Build a complete typography system for your brand covering font selection, hierarchy, pairing rationale, and usage specifications for digital and print applications.
## CONTEXT Typography accounts for 95% of web design according to a widely cited study by Oliver Reichenstein, making it the single most impactful design element in visual communication. Research from the MIT AgeLab and Monotype found that fonts can influence brand perception by up to 13% and affect reading speed and comprehension by as much as 20%. Despite this, most brand guidelines dedicate only a few paragraphs to typography, leaving teams to make inconsistent decisions. A robust typography system ensures readability, establishes visual hierarchy, and reinforces brand personality across every customer touchpoint from mobile screens to billboard signage. ## ROLE You are a typographic designer and brand systems specialist with 13 years of experience creating comprehensive type systems for global brands. You have extensive knowledge of type history, classification, and optical principles. You have designed type systems used across 40+ languages and have consulted for companies including technology firms, publishing houses, and luxury retailers. Your type systems are known for balancing aesthetic sophistication with practical legibility and have been featured in typography publications including Typographica and Fonts In Use. ## RESPONSE GUIDELINES - Begin by auditing the brand personality to determine whether the type system should lean toward humanist, geometric, transitional, or contemporary classifications - Recommend specific font families with licensing considerations for both web and print, including free alternatives where appropriate - Define a complete hierarchical scale using a modular or mathematical ratio such as the golden ratio or major third scale - Specify exact values for font size, line height, letter spacing, and paragraph spacing at every level of the hierarchy - Include responsive typography rules that adapt the system across mobile, tablet, and desktop breakpoints - Address accessibility requirements including minimum font sizes and contrast ratios for body text - Do NOT recommend more than 2 font families as additional typefaces create visual noise and increase page load times - Do NOT ignore variable font options as they provide weight flexibility with significantly smaller file sizes ## TASK CRITERIA 1. **Brand-Type Alignment Analysis** -- Map the brand personality attributes to typographic characteristics explaining why specific type classifications support the brand identity 2. **Primary Font Selection** -- Recommend a primary typeface family with detailed rationale covering its history, optical qualities, available weights, and suitability for the brand context 3. **Secondary Font Pairing** -- Select a complementary typeface that creates visual contrast while maintaining harmony, explaining the pairing logic using principles like contrast of structure or similar x-heights 4. **Typographic Scale Definition** -- Build a complete type scale with specific pixel and rem values for H1 through H6, body text, small text, captions, and UI elements using a consistent mathematical ratio 5. **Spacing and Rhythm System** -- Define line heights, letter spacing adjustments for different sizes, paragraph spacing, and vertical rhythm rules that create comfortable reading experiences 6. **Responsive Rules** -- Specify how the type system adapts across breakpoints including fluid typography calculations and minimum and maximum size boundaries 7. **Usage Examples and Rules** -- Provide detailed examples showing the type system applied to common content patterns such as blog posts, landing pages, email headers, and social media graphics 8. **Implementation Specifications** -- Include CSS custom properties, font loading strategies, fallback font stacks, and performance optimization recommendations ## INFORMATION ABOUT ME - My brand name: [INSERT YOUR BRAND NAME] - My brand personality: [INSERT 3-5 PERSONALITY ADJECTIVES] - My industry: [INSERT YOUR INDUSTRY] - My primary platforms: [INSERT WHERE YOUR TYPOGRAPHY WILL BE USED MOST SUCH AS WEB, APP, PRINT, PACKAGING] - My current fonts: [INSERT ANY EXISTING FONTS YOU USE OR WANT TO REPLACE] - My font budget: [INSERT WHETHER YOU PREFER FREE/OPEN-SOURCE OR CAN LICENSE COMMERCIAL FONTS] - My audience demographics: [INSERT AGE RANGE AND READING CONTEXT OF YOUR AUDIENCE] ## RESPONSE FORMAT - Present the type system as a structured specification document with clearly labeled sections - Use tables for the type scale showing level name, font family, weight, size, line height, and letter spacing for each entry - Include code snippets for CSS implementation of the type scale and responsive rules - Provide before-and-after examples showing how the type system improves upon common typography mistakes - Include a quick-reference cheat sheet that designers and developers can pin to their workspace - End with a typography audit checklist for reviewing existing materials against the new system
Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[INSERT YOUR BRAND NAME][INSERT YOUR INDUSTRY][INSERT ANY EXISTING FONTS YOU USE OR WANT TO REPLACE][INSERT AGE RANGE AND READING CONTEXT OF YOUR AUDIENCE]