Design professional typography with font presets, size/weight/leading/tracking, alignment, specimens, and IDE-ready CSS with optional variables.
Workspace
Fonts, scale, leading, tracking, and export-ready CSS.
Preview
Type specimen
40px · 700 · lh 1.15 · 42ch
Design systems that scale
Size
40px
Weight
700
Leading
1.15
Tracking
-0.6px
Copy · Download
CSS outputcss | typography.css
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap");
.type {
font-family: "DM Sans", system-ui, sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.6px;
text-transform: none;
text-align: left;
font-style: normal;
text-decoration: none;
color: #0f172a;
}Keep exploring
Build professional fluid CSS clamp() values with viewport interpolation, property presets, live size chart, and IDE-ready output including CSS variables.
Open toolDesign professional CSS text-shadow with multi-layer stacks, glow/neon/outline presets, live type preview, and IDE-ready CSS.
Open toolClick a question to open it. Click again to close.
Looking for more? Browse Our Tools.