Support

How can we help you?

Get answers to all your Stark-related questions with
step-by-step guides from our Support center.

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.

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.

Using Typography Analysis for Mac

Download: Stark for Mac

The Tools page in Stark for Mac displays the cursor hovering over Typography.

To use Typography Analysis in Stark for Mac:

  1. Open an imported project
  2. Choose an artboard
  3. Choose Typography from the right side panel.
pography issue card is open, showing details about the issue in the right side panel. These details include the current text size, font, and weight, as well as suggestions for rectifying this issue.

When hovering over an issue card for a typography issue, Stark will display every instance of that specific issue and hide all others. Selecting the three horizontal dots in the upper-right corner of the issue card will give you the option to remove the issue.

Inspecting a typography issue card

When opening a typography issue card, the right side panel in Stark will display the current text size, letting you know that it is most likely too small to be legible. The current setting will be listed, including font type, weight, and size. Below that, Stark will offer suggestions to rectify the issue, including font, weight, and size.

pography issue card is open, showing details about the issue in the right side panel. These details include the current text size, font, and weight, as well as suggestions for rectifying this issue.

 

Have any questions about using Typography Analysis? Don’t hesitate to reach out to us at support@getstark.co or via the support bubble in the lower right corner of this page.