CSS Type Studio

CSS Type Studio makes it easy to design your next web project with great typography. Create pleasing font pairings with typefaces available from Google Fonts, and then use advanced font properties in CSS to fine-tune text rendering, kerning, ligatures, numerical forms, optical sizing, and more. CSS Type Studio makes it easy to preview how these font properties translate to the screen. You can then export the CSS code for your web project.

You can test your font pairings and modify common properties such as size, weight, and line height. In addition, you can access advanced OpenType font properties including:

• Ligatures. Enable or disable common ligatures, or make use of more obscure OpenType features like contextual alternates and discretionary ligatures.
• Numerical forms. Well-designed fonts can have options for proportional and tabular numbers, diagonal fractions, and ordinals.
• Text rendering. Choose whether the web browser optimizes for legibility or preserves the geometric shape of fonts.
• Optical sizing. Variable OpenType fonts can automatically can change stroke weights or forms depending on the font size.
• Font synthesis. Choose whether browsers will generate simulated italics and other styles that a font file doesn't supply.
• ... and more!