Using Typography Analysis

Check your designs to see if your text is too small to be legible

While the WCAG doesn’t give specific regulations for font sizes, it’s often the case that trying to read type that’s too small is a bad experience.

For the Stark Typography tool, we’ve implemented our guidelines based on research and best practices so that we can help you select fonts that are visually accessible.

Using Typography Analysis with Figma and Sketch plugins

Download: Stark for Figma, Stark for Sketch

Issue cards displayed for text size issues using Typography Analysis in Stark.

To use Typography Analysis in your design tool, go to Plugins and choose Stark > Typography. The plugin will scan all your artboards and flag any text smaller than 12px.

Surfacing and correcting typography issues

The Typography Analysis scans your file and will surface any instances where the text might be too small for all people to read.

Typography Analysis surfacing an issue where text is too small to be legible.

If any text is smaller than the recommended 12px font size, Stark will display issue cards that you can click in order to see more details about each instance. Adjust the text size within the card, then click Apply to save the change.

A text size issue that has been rectified using Typography Analysis in Stark. The text has increased from 12 pixels to 16 pixels.

❗️

In Stark for Figma, we introduced the ability to "Apply to all" enabling you to fix all your typography violations with one click.

Using Typography Analysis in your browser

Download: Stark for Brave, Stark for Chrome, Stark for Edge

Stark’s browser extension surfacing and listing text size issues using Typography Analysis.

To get started using Typography Analysis, open Stark from your browser’s extension menu. After opening the typography tool, Stark will automatically scan the live web page and surface any text under 12px.

Applying changes with Live Preview

A text issue and its details are displayed using Typography Analysis in Stark’s browser extension.

Choosing a text issue card will center the page directly on the issue, so that you don’t need to go searching. You can adjust the text size within the card, then click Apply to view the Live Preview of the change.

Stark’s browser extension using Typography Analysis to rectify a text size and displaying it using Live Preview.

👉

Don’t worry—we didn’t edit your site. Refreshing the page will revert the changes.

Have any questions about using Typography Analysis? Don’t hesitate to reach out to us at support@getstark.co.

Go back to articles