The ultimate UI design guide
them in order to achieve decent levels
of readability. This is becoming more
and more recognised as a ‘standard’;
Google’s Lighthouse Audit tool even
suggests it as a manual check (or even
a flag if the text contains links that
may be too close together as a result of
suboptimal line height).
Once again, the WCAG helps us
out with this one, declaring that line
heights should be 1.5x the font size. So,
in your UI design tool under ‘Line’ (or
similar), simply multiply the font size
by – at least – 1.5. As an example, if the
body text is 18px, then the line height
would be 27px (18*1.5 – you can also
execute the maths operation directly
in the Inspector). Again, though, be
mindful – if 1.6x feels a better fit, use
1.6x. Remember that different fonts will
output different results.
It’s too early to think about using real
data in our design but, at the very least,
we should still use somewhat realistic
data (even lorem ipsum). InVision Studio
has a native real data app to help us see
what our typography might actually
look like.Paragraph spacing
Paragraph spacing isn’t a style that
we can declare using InVision Studio’s
Inspector. Instead, we’ll need to
manually align layers using Smart
Guides (ζ). Similar to line height, the
magic multiplier is 2x (double the font
size). As an example, if the font size
is 18px, then there should be at least a
36px space before leading into the next
text block. Letter spacing should be at
least 0.12.However, we don’t need to worry about
this until we begin creating components.Shared styles
If your UI design tool supports it
(InVision Studio doesn’t yet), consider
turning these typographic styles into
‘Shared Styles’ to make them rapidly
reusable while ensuring visual
consistency. This is usually
accomplished via
the Inspector.“Legible letters
result in clarity
and readable words
are what help users
digest content”
Above Setting appropriate font sizes is vital in creating a
visual hierarchy throughout your site