CSS Type Studio
CSS Type Studio

Advanced Typography with CSS

New user? Log in to save and share your type designs.
 YOUR DESIGNS 
 CONTROLS 
 DISPLAY OPTIONS 
 GLOBAL PROPERTIES 
 ELEMENT PROPERTIES 
Search all fonts
FONT VARIANT
Capitals normal
small caps
all small caps
petite caps
all petite caps
unicase
titling caps
Ligatures normal
common ligatures
no common ligatures
discretionary ligatures
no discretionary ligatures
historical ligatures
no historical ligatures
contextual alternates
no contextual forms
Numerical Forms normal
ordinals
slashed zeros
lining numbers
oldstyle numbers
proportional numbers
tabular numbers
diagonal fractions
stacked fractions
The text-wrap CSS shorthand property controls how text inside an element is wrapped. The different values provide:
• Typographic improvements. For example, more balanced line lengths across broken headings
• A way to turn text wrapping off completely.
The font-kerning CSS property sets the use of the kerning information stored in a font.
• Auto: The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.
• Normal: Font kerning information stored in the font must be applied.
• None: Font kerning information stored in the font is disabled.
The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
• None: The browser will not modify the shape of glyphs for optimal viewing.
• Auto: The browser will modify the shape of glyphs for optimal viewing.
Branding.
An Error Has Occurred
We're sorry, but the app encountered an error and will need to reload. The app will reset, and you will lose any unsaved changes. If you continue to experience errors, try clearing your browser cache and reloading the page.
Load layout
Would you like to display the shared design named “a”? Any unsaved changes you’ve made will be lost.

Use Advanced Type Properties in CSS

Go beyond font-family and font-size. CSS Fonts Module Level 4 gives you control over advanced typographic features including text wrapping, kerning, optical sizing adjustments, and OpenType features such as oldstyle figures, ligatures, and small caps. Best of all: these features are supported in the latest version of every major browser.

Easily Test Google Fonts

Set advanced type properties for header and body elements in HTML, then quickly preview the most popular typefaces from Google Fonts, or access 1,900+ typefaces with a Pro subscription.

Save and Share Your Favorite Designs

Want to save or share your design with your team? Create a free account to save up three designs.
GET CODE

Code is shown only for properties that differ from the browser defaults. If you are using a CSS reset or framework, these styles may not work as expected. For clarity, the use of shorthand properties such as font-variant is avoided in preference for constituent properties (such as font-variant-caps and font-variant-ligatures).

Copy code

CSS Type Studio is designed for larger screens. Sorry about that.

Unfortunately, I couldn’t find a way to design this user interface to fit all of the controls and typeface preview window into a phone-sized viewport.

Please try viewing this site with a tablet or larger device.