Typography Scale: Choosing Type Sizes for UI Design
Build a harmonious type scale using mathematical ratios for readable, consistent interfaces.
Key Takeaways
- Random font sizes create visual noise and inconsistency.
- Minor Third (1.2): conservative, good for body-heavy content.
- Start with your body text size (typically 16px for web, 14-17px for apps).
- Type sizes should increase on larger screens.
- Each type size needs an appropriate line height.
Color Palette Generator
Why Type Scales Matter
Random font sizes create visual noise and inconsistency. A type scale uses a mathematical ratio to generate a harmonious set of sizes where each step feels proportionally related. This creates visual hierarchy, improves readability, and speeds up design decisions โ instead of choosing from infinite sizes, you pick from a predefined set.
Popular Scale Ratios
Minor Third (1.2): conservative, good for body-heavy content. Major Third (1.25): balanced, popular for web apps. Perfect Fourth (1.333): moderate contrast, good for marketing pages. Augmented Fourth (1.414): strong contrast, suitable for editorial design. Golden Ratio (1.618): dramatic contrast, best for large displays and headings.
Building Your Scale
Start with your body text size (typically 16px for web, 14-17px for apps). Multiply up for headings: 16 ร 1.25 = 20, 20 ร 1.25 = 25, 25 ร 1.25 = 31. Divide down for small text: 16 / 1.25 = 12.8 (round to 13). This gives you: 13, 16, 20, 25, 31, 39. Six to eight steps covers most interface needs.
Responsive Scaling
Type sizes should increase on larger screens. A common approach: use a smaller ratio on mobile (1.2) and larger ratio on desktop (1.333). The body size might be 16px on mobile and 18px on desktop. Implement with CSS clamp(): font-size: clamp(1rem, 0.5rem + 1vw, 1.125rem) for fluid scaling between breakpoints.
Line Height and Spacing
Each type size needs an appropriate line height. Smaller text needs more relative line height (1.6-1.8 for body copy) while larger headings need less (1.1-1.3). Spacing between text elements should follow the same scale. Heading-to-body spacing is typically 0.5-1ร the heading size. Paragraph spacing is typically 0.5-1ร the body line height.
Herramientas relacionadas
Formatos relacionados
Guรญas relacionadas
Color Theory for Digital Design: A Practical Guide
Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility requirements, and practical palette-building techniques.
Typography Pairing: How to Combine Fonts Effectively
The right font pairing creates visual hierarchy and personality in your designs. This guide covers pairing principles, common mistakes, and proven font combinations for web and print projects.
SVG vs Canvas vs WebGL: Choosing a Graphics Technology
The web platform offers three main graphics technologies, each optimized for different use cases. This comparison helps you choose between SVG, Canvas, and WebGL based on your project's requirements.
Best Practices for Dark Mode Design
Dark mode is no longer optional โ users expect it. Designing an effective dark theme requires more than inverting colors. This guide covers contrast, elevation, color adaptation, and implementation strategies.
Troubleshooting Color Consistency Across Devices
Colors that look perfect on your monitor may appear different on phones, tablets, and printed materials. This guide explains why color shifts happen and how to minimize inconsistencies across devices.