net - UK (2020-03)

isn’t the challenge. The challenge is

maintaining consistency throughout

the entire design.

Consistency establishes clear

hierarchy between elements of

varying importance, which in turns

helps users understand a UI faster and

even digest content more efficiently.

FEATURES
The ultimate UI design guide

Paragraph spacings, letter spacings, font sizes and line

heights should enhance readability and communicate the

visual hierarchy of different snippets of UX content

choose your

typography

Font size

When it comes to legibility and

readability, the minimum acceptable

font size as defined by the WCAG 2.0

Web Content Accessibility Guidelines

is 18pt (or 14pt bold). The best font

size to use largely depends on the font

itself but it’s important to be mindful

of visual hierarchy and how this

base size distinguishes itself from

summaries and headings (ie <h1>,

<h2>, <h3>).

With your UI design tool of choice

(I’ll be using InVision Studio), create a

Great

typography (like

many aspects

of design)

boils down to

accessibility.

Visual design

certainly adds to the user’s overall

experience but at the end of the day,

users are interacting with the UI, not

viewing it as art. Legible letters result

in clarity and readable words are what

help users digest content efficiently.

Both are more important than any visual

aesthetic.

However, well-designed typography

can still be aesthetically satisfying.

Black-on-white Helvetica (or a similar

font) can be a thing of beauty after only

a few simple typographic enhancements.

By enhancements, what I mean is

tweaking the font size, line height, letter

spacing and so on – not the font or the

colour of the text.

‘Beautiful’ typography is actually ugly

when it’s unreadable because frustration

always trumps aesthetics. Great design

is balanced and harmonious.

Like many aspects of UI design,

fine-tuning visuals to balance

accessibility and aesthetics

series of text layers (T) and then adjust

all of the sizes to correlate with the

following template:

O <h1>: 44px

O <h2>: 33px

O <h3>: 22px

O <p>: 18px

With InVision Studio (and all other UI

design tools), this is done by adjusting

the styles using the Inspector panel on

the right-hand side.

Next choose your font, but beware

because what you might notice with

some fonts is that 18px <p> and 22px

<h3> doesn’t look all that different. We

have two choices: tweak the font sizes or

consider a different font for headings. Go

with the latter if you anticipate that your

design will be text-heavy.

Keep in mind that:

1

Visual UI design is often a gut-

feeling approach

2

Nothing is decided; everything is

subject to change

Line height

Optimal line height ensures that lines

of text have enough spacing between