Inter
varsans-serifRasmus Andersson · 9 weights
Your text here
400w
UI Font Generator
Find the perfect font for your app, dashboard, or digital product. Preview screen-optimized sans-serif and humanist typefaces at UI sizes — labels, buttons, body, and captions.
Preview Text (14 chars)
Sample:
Typography Controls
For:
59 of 273 typefaces
Typeface Library & Font Specimen Previews
Open Sans
varsans-serifSteve Matteson · 6 weights
Your text here
400w
Lato
sans-serifŁukasz Dziedzic · 5 weights
Your text here
400w
Roboto
sans-serifChristian Robertson · 6 weights
Your text here
400w
Oswald
varsans-serifVernon Adams · 6 weights
Your text here
400w
Montserrat
varsans-serifJulieta Ulanovsky · 9 weights
Your text here
400w
Nunito
varsans-serifVernon Adams & Jacques Le Bailly · 8 weights
Your text here
400w
Raleway
varsans-serifMatt McInerney · 9 weights
Your text here
400w
Josefin Sans
varsans-serifSantiago Orozco · 7 weights
Your text here
400w
Poppins
sans-serifIndian Type Foundry · 9 weights
Your text here
400w
Source Sans 3
varsans-serifPaul D. Hunt (Adobe) · 8 weights
Your text here
400w
Rubik
varsans-serifHubert & Fischer · 7 weights
Your text here
400w
UI Typography Scale: Design System Standards
A systematic type scale ensures consistent, accessible hierarchy across every screen in your app:
Accessibility
Minimum 4.5:1 contrast ratio for normal text (WCAG AA) and 3:1 for large text. Never render body text below 12px. Support system font-size scaling for users with visual impairments.
Multi-Weight Family
A robust design system needs at least 5 weights: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700). Variable fonts like Inter cover all weights in one optimized file.
Responsive Scaling
Use clamp() for fluid type scaling: font-size: clamp(14px, 1.5vw, 18px). This scales smoothly between mobile and large desktop without breakpoint jumps.