Responsive Typography
Scaling Across Devices
Learn TechniquesResponsive typography ensures text remains readable and aesthetically pleasing across all device sizes. Using the right units and techniques creates fluid type that scales naturally.
Common Type Scales
| Element | Mobile | Desktop | Ratio |
|---|---|---|---|
| Body text | 16px | 18px | 1.0 |
| H3 | 18px | 22px | 1.2 |
| H2 | 22px | 28px | 1.5 |
| H1 | 28px | 40px | 2.0-2.2 |
CSS example: font-size: clamp(1rem, 2.5vw, 2rem);
まとめ
Responsive typography combines relative units, viewport-based sizing, and CSS clamp() for smooth scaling. Start with a readable base size (16-18px), establish a consistent scale ratio, and test across devices. Good responsive type enhances readability and user experience on every screen.