CSS Type Studio is unclaimed —

CSS Type Studio

Advanced Typography with CSS·csstypestudio.com

From $4/mo · Free plan See pricing ↓

CSS Type Studio is a browser-based tool for testing and fine-tuning CSS typography settings on HTML layouts. Users can adjust font family, size, weight, spacing, variant features (ligatures, small caps, numerical forms), text wrapping, kerning and more, previewing changes live against sample texts. It draws typefaces from Google Fonts and lets users generate the corresponding CSS code, as well as save and share their layouts.

What it's for

Iterate through different typefaces, sizes, and spacing attributesPreview Google Fonts typefaces on sample textGenerate CSS code for chosen typography settingsSave and share typography layouts with a design team

Features 19

Color mode preview (light, dim, dark, cool, warm)
Font family selection from Google Fonts
Font size control in rem units
Font style selection (normal, italic, oblique)
Font variant controls (small caps, petite caps, unicase, titling caps)
Font weight control (100–950)
Generate copyable CSS code
Kerning control
Ligature controls (common, discretionary, historical, contextual)
List style type options
Margin and padding controls
Numerical form controls (oldstyle, lining, tabular, proportional, fractions)
Optical sizing control
Save and share type layouts
Text alignment, indent, letter spacing, line height, word spacing controls
Text rendering optimization settings
Text transform options
Text-wrap options (balance, pretty, stable)
Weight/style/small-caps synthesis controls

At a glance

free tier

TypeWeb app

DeploymentCloud

PlatformsWeb

Fordesign teams

CompanyThe Solar Nerd, LLC

Integrations

Google FontsStripe

Resources

Docs

Pricing

FreeFree

It is really free: no credit card requested, no data sold.

Save up to three layouts

Pro$4/mo

Billed via Stripe.

Save up to 100 layouts