Adapted from Lynn Kiangâs Core 2 Interaction Class.
1. Start with 16px.Â
14px is the smallest type size for screen if you want people to read, but the trend has been larger sizes for accessibility. Every typeface is different and should be sized for comfort in reading.
10px â 12px  for labels, captions, meta information
14px â 24px is comfortable reading scale and should be used for long passages of text
24px and above can be used for subtitles,Â
2. Design to scale.
As soon as possible, bring your design comps into your phone(viaFigma Mirror) or on web browser. Donât stay in Figma, zoomed at 200%. It gives you a false sense of legibility.
3. Line-heights will be generally be higher than in print.Â
By default, your computer will generate a line-height at about 20% of your selected font. These are usually too short. Taller line-heights are preferred with:Â
Continuous reading passages
Longer paragraph widths
Typefaces will high x-heightsÂ
The reader should not need to jump too far to continue their reading. If your white space starts looking like stripes, itâs too loose. Still not sure? Aim for 30% of your typeface size.
Â
Â
Credit: Microsoft
Â
Â
4. Add letter-spacing thoughtfully.
Small type? Add letter-spacing.
All caps? Add letter-spacing.
White text on black? Add letter-spacing.
Giant type? Consider negative letter-spacing.
letter-spacing: 2px;
5. Donât go too wide. Donât go too short.Â
Depending on your typeface size, aim for a reading width that isnât too short to create awkward line breaks / rag and not too wide that your reader loses track of their reading line.
Desktop: Line-width should be apx 65â80 characters per line
đ Slides, Web Typography Review
â¨ď¸ Notes, Typesetting on Screen
1. Start with 16px.Â
2. Design to scale.
3. Line-heights will be generally be higher than in print.Â
4. Add letter-spacing thoughtfully.
letter-spacing: 2px;5. Donât go too wide. Donât go too short.Â