DESIGN TOOL

Text Ramp Planner

Build a starting type ramp from the target platforms, resolutions, font, and text styles.

1 ︲ WHAT ARE YOU DESIGNING FOR?

Select every platform or environment the design needs to support. Selecting multiple platforms allows the final ramp to account for the guidance that applies across all of them.

2 ︲ WHAT RESOLUTIONS ARE YOU TARGETING?

Add the resolutions the design needs to support. If the target resolutions are unknown, use the recommendations based on the platforms selected above.

Choose one or more platforms above to see recommended resolutions.

3 ︲ WHAT FONT ARE YOU USING?

Select a common font, choose from the live Google Fonts library, or load a font file from the computer.

4 ︲ WHAT TEXT STYLES DO YOU NEED?

Select the styles that apply to the design. Starting sizes are optional. Leave a size blank and the tool will estimate it when the type ramp is generated.

Text StyleStarting Size
px

5 ︲ THE TYPE RAMP

Preview the columns that will appear in the ramp. Rename them, change their order, or add custom stops such as Large or X-Large before previewing the recommendation.

PREVIEW RAMP CATEGORIES / COLUMNS
Add at least one target resolution above to build the ramp columns.
Edit Type Ramp

6 ︲ WHAT SHOULD THE PREVIEW SAY?

Optional. Enter a phrase from the design to see the generated ramp with more realistic copy. Leave this blank to use the default preview sentence.

This tool provides estimates to help make design decisions.

Results are based on published legal requirements, platform guidance, selected resolutions, and available font measurements. Actual rendering can vary by browser, operating system, game engine, display density, font implementation, and final platform. Always verify the finished design in the target environment.