Chrome DevTools: Easily control typography with the CSS Font Editor

Introduction

The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool rather than typing in CSS properties and values. You can adjust the following:

• Font Family for example, you can insert the style font-family: Comic Sans MS
• Font Size can insert the style font-size: 2.8rem (the unit is customisable)
• Line Height inserts a style such as line-height: 0.7 (the unit is customisable)
• Font Weight can insert a style such as font-weight: 300 or even font-weight: lighter
• Spacing can insert a style like letter-spacing: -0.155em (the unit is customisable)

In addition, you can specify a fallback font.

Having quick access to these commonly used CSS properties helps make prototyping easier. The Font Editor also acts as a reminder as to which typography related properties (and values) can be used.

How to use this feature

To use the Font Editor, follow these steps:

1. Inspect some text with DevTools.
2. Click on the Font Editor icon within the Styles Pane (marked by two overlapping "A"'s).
3. Make some changes within the Font Editor and observe the page updates instantly.

Availability

This feature is in Chrome Stable, however it needs enabling from the Experiments Panel. To enable:

1. From DevTools, enter Cmd + Shift + P > Show Experiments.
2. Type in font in the Experiments Filter box.
3. Enable the Font Editor Experiment.

Further Resource

DevTools also has a built-in shadow editor which provides a visual interface for editing box shadows and text shadows.