What you’ll make
A small type and icon sample you can reuse on another screen.
Would you know what these buttons do?
A screenshot review app gets one set of type and icons
Say your screenshot review app has a roomy homepage and a settings screen packed with labels like ‘Default export filename.’ I’d try the busy screen first. If the type is easy to read there, I have a good starting point for the homepage.
Type sample
Three styles used on both screens
- Heading · 32 px semibold with 40 px line height
- Body · 16 px regular with 24 px line height
- Field label · 14 px medium with 20 px line height
- Fallback · system font. ‘Default export filename’ can wrap to a second line.
Icon sample
Two buttons with clear names
- Export button · 16 px download icon next to ‘Export review’
- Preview close button · 16 px X with the accessible name ‘Close preview’
- Both buttons show a visible focus ring when you tab to them.
Before you start
- Pick two screens you already have, like a settings page and a landing page. Grab the headline, a long field label, an error message, and a line with numbers.
- Find out which fonts and icon library you already use. If you’re trying a new font, bring its source and check that it covers the languages you need.
Pick the words and controls you need to fit
Take one heading, one sentence, and your longest field label from a real screen. Pick one button with words and one that needs a name because it only has an icon.
Make a small sample in your own layout
Open your design editor or a copy of the page and put those pieces together at phone width. Try one font first. Write down size, weight, and line height for the heading, body, and label.
Keep the rules you can repeat
Save the type choices and the two controls as a named sample. Record the fallback font and the name of the icon-only button.
I use ‘Default export filename,’ ‘Export review,’ and the preview close button from my screenshot review app.
My sample shows the long label on two lines, a download icon with ‘Export review,’ and an X named ‘Close preview.’
Check the long label and both buttons
Open the sample at phone width. Try it with zoom or a larger text size. If you have a working page, try the keyboard and the fallback font there too.
- Read the longest label without any words cut off.
- Check that each button has a clear name.
- Save the sample and its type settings together.
Optional: Try a second screen and a fallback font
Use the same type and icon rules on a different screen. Then block or turn off the web font and see whether the longest label and the key buttons still fit.
Make me a type specimen with my actual words
Use this with two screenshots and your longest label to compare type before changing the theme.
I’m trying to make [busy screen] and [roomier screen] feel like the same product. Here are [screenshots or files], [current theme or font candidates], and the real text I need to fit: [heading, longest label, error, number or code, and languages]. Compare the same copy in each family at [phone and desktop widths], using the same available space. Include my current type as a baseline if I supplied it. Make a specimen with heading, body, label, and error roles. For each role give family, weight, size, line height, and fallback. Show how to check wrapping and lookalike characters such as I, l, and 1. If you can’t render the font, give me a small HTML specimen I can open and mark the wrapping as untested. Flag any font file, license, or language coverage I need to verify.
Write down what each icon means
Use this with screenshots of the controls to settle the icon, label, and name before you build.
Here are [screens or controls] and my icon set [library]. Give me a table with location, what the control does, the proposed icon, visible words, accessible name if needed, and size. Point out any icon someone could mistake for a different action. Where words sit beside the icon, show how the words give the control its name and the decorative icon stays quiet. If I didn’t give you enough to tell what a button does, mark it for confirmation. Finish with a keyboard check for the busiest row and an icon-only control.
Give me a fallback and zoom test
Use this after applying the kit to check the two screens when the custom font fails or the text gets bigger.
Here are [updated screens or preview] and [chosen type and icon roles]. Write me a short test card for a fresh load, a blocked font, a narrow phone width, and browser zoom. For each case tell me what to do, what to inspect, and what I should see. Include my longest field label, an error, and the busiest row of icons. Have me record the actual rendered font, any clipped words, and any control I can’t name or reach with a keyboard. Mark anything you haven’t observed as a check for me to run.
Optional worksheet: Type and icon worksheet
Fill this in as you go. Keep this page open while you work. Reloading it clears your answers.
Troubleshooting
Why does the type look different on another computer?
Check the rendered font and the requested weight in your browser’s developer tools. If you see the fallback, check the font file path and whether you loaded that weight.
Why do two icons look different at the same size?
Check that they come from the same set and that neither has a stroke override. Try aligning the icon boxes to the text in your shared button style.