Responsive
Responsive Type Preview
Preview your typography at four viewport widths side by side. Pick heading and body fonts, set sizes for desktop, and see how the hierarchy scales on mobile (375px), tablet (768px), desktop (1280px), and wide desktop (1920px).
The art of typography
Typography is the visible voice of design. The right measure keeps the eye on the line, lets the reader rest at its end, and finds the next line without losing place. Aim for between 45 and 75 characters per line of body text. The ratio you pick for your type scale determines how much the hierarchy stretches at different viewport widths.
The art of typography
Typography is the visible voice of design. The right measure keeps the eye on the line, lets the reader rest at its end, and finds the next line without losing place. Aim for between 45 and 75 characters per line of body text. The ratio you pick for your type scale determines how much the hierarchy stretches at different viewport widths.
The art of typography
Typography is the visible voice of design. The right measure keeps the eye on the line, lets the reader rest at its end, and finds the next line without losing place. Aim for between 45 and 75 characters per line of body text. The ratio you pick for your type scale determines how much the hierarchy stretches at different viewport widths.
The art of typography
Typography is the visible voice of design. The right measure keeps the eye on the line, lets the reader rest at its end, and finds the next line without losing place. Aim for between 45 and 75 characters per line of body text. The ratio you pick for your type scale determines how much the hierarchy stretches at different viewport widths.
The preview scales heading and body sizes proportionally for each viewport. Mobile uses 70% of the desktop size, tablet uses 85%, desktop and wide use 100%. This approximates a fluid type scale. For precise fluid sizing, use the fluid type generator.
Why Responsive Typography Matters
A heading that looks great at 48px on desktop can be too large on a 375px mobile screen. Body text that reads well at 16px on desktop can feel cramped at the same size on mobile. Responsive typography scales the type to fit the viewport, so the hierarchy stays proportional across devices.
There are two approaches. The media-query approach sets different font sizes at different breakpoints (mobile, tablet, desktop). The fluid approach uses CSS clamp() to scale the font size continuously between a minimum and maximum. The fluid approach is simpler to maintain and avoids the abrupt jumps of breakpoints, but it requires careful tuning of the slope and viewport range.
This preview shows the media-query approach: it scales the desktop sizes by 70% for mobile and 85% for tablet. For a true fluid scale, use the fluid type generator, which produces clamp() values you can copy into your CSS.
The Four Viewport Breakpoints
375px wide. The most common phone width. Headings scale to 70% of desktop. Body stays readable at 14-16px.
768px wide. Portrait tablets and small landscape tablets. Headings scale to 85% of desktop.
1280px wide. Standard laptop and desktop. The reference size for your type scale.
1920px wide. Large monitors and external displays. Same sizes as desktop, wider measure.