Typography Design system

Build clear content hierarchies at every size.

8 checks · 3 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Use a consistent font size scaleDefine levels from caption to title and avoid adding new sizes for each screen.Replace titles with longer content and increase font size on devices. Keep hierarchy, Vietnamese accents, line spacing, and related actions easy to read without cutting off content.Example The card has a two-line title, description, and open button; When the letters are larger, the tag increases in height instead of covering the button or cutting off the Vietnamese mark.Set style by roleDistinguish titles, content, labels, and captions to choose styles according to meaning.A typeface should have a name that plays the same role as the body or label; Role changes need to be updated synchronously instead of editing each screen.Check Vietnamese fonts and accentsChoose the weight to use, backup font and check for accented text when font download fails.Check the length of letters, Vietnamese accents and weight actually loaded; Backup fonts must be close in size to avoid layout jumping.

Interaction and usability

Try the operation, change the status and continue working.

Adjust letter spacingSet appropriate line height and character spacing for titles and long reads.Try a multi-line paragraph, not just a sample sentence. Lines that are too tight make it difficult to read, and wide letter spacing can destroy words and punctuation at small sizes.Keep text readable when scalingCheck for a narrow screen and 200% zoom level to avoid text cutting or overlapping content.When increasing font size or zoom, buttons and tags must stretch according to the content; Avoid fixed heights that cut off the second line.Keep content contrasting enoughMake sure small text is still easy to read and don't use color as the sole indicator of meaning.Check also subtext, placeholder and light/dark disabled status; Small letters on colored backgrounds are often easy to miss.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Define minimum text sizes by roleDocument readable minimums for body text, labels, and captions, and explain when a larger style is needed instead of shrinking text to fit.Try at actual display size on device; Text in an enlarged preview image may obscure readability issues at full size.Define a responsive type scaleDocument how headings and body text change across viewport widths while preserving hierarchy and avoiding abrupt size changes.If using flexible font sizes, set minimum and maximum limits; Check that the long label is not shrunk to keep just one line.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check the hierarchy when the text is long and enlarged

Replace titles with longer content and increase font size on devices. Keep hierarchy, Vietnamese accents, line spacing, and related actions easy to read without cutting off content.

EXAMPLES

Usage examples

Long title in one tag

The card has a two-line title, description, and open button; When the letters are larger, the tag increases in height instead of covering the button or cutting off the Vietnamese mark.