How to get better at web Typography
A UI designer’s guide to use Typography that makes UI aesthetically clean & improves legibility.
If you’d google term typography you’d come across some articles on how it is art or tech. How to best pair fonts, top 5 fonts and million other suggestions.
It’s really hard to find the basis for the practical usage in daily UI designer’s life. Specifically, for self-learning designers. So here I am, trying to lay out in the most practical way I can.
While practicing UI daily is huge part of understanding type and design principles, but one should know how to look at it from a designer’s lens. How to develop a designer’s eye.
Let’s start with an example
Example site: Airbnb
We all love Airbnb’s design, there is no denying that but we just don’t know the reason yet. Let’s try to crack it down
Alignment
As cliche and common sense thing as it sounds, it’s necessary to have your content aligned to the language you are using. Here, Airbnb being a global platform, uses English and it is read from left to right, hence the left aligned text.
For Arabic you’d find right to left alignment in apps. Not centre 😉
A consistent alignment gives your user’s eye a reference point, making content easy to scan.
Contrast and Visual hierarchy
Not every information on your UI is important, if your user is still at Discovery Stage of their journey towards goal. User skims through the content and right visual hierarchy helps them proceed to the next stage of the user journey.
In Airbnb example,
- Font size: Only 3 font sizes — 22, 16 or 14 are used predominantly, making it clean and consistent
- Font weight: if your notice the pairing, all the important content that influences user’s decision is in Semibold paired with lesser important or descriptive body in Regular
Extra visual weight is given to the price at the bottom, because well it is a major influence and can make or break a decision. (Also subjective to the researched data)
Legibility
One thing I absolutely like about Airbnb, the text is extremely legible. While we designers sometimes push the limits to using even 10 size or using low contrast greys. The hex code for black used on the entire page is #222222 except for the really low priority
Call to actions
Just pondering on the very common issue found in CTAs across various platforms is writing ‘Click Here to view *page*’ which in isolation is ambiguous. If user is only scanning the page, which they most probably be, it is simple non-actionable.
In above example (right screen), your eye would read “aircover + learn more” — clearly pitching the user’s intent
Spacing & Leading in Type
Leading: The body text uses ample leading space (measured from base line of the text) making it easy to read. The characters are not colliding with each other. Where in contrast, the page header has a reduced leading, which keeps the content visually together.
Spacing: Since the page is content heavy the widget padding is 32 at top and 24 at bottom. Not specific to typography but worth considering on such content rich page.
As a general rule of thumb instead of typical Font size + 2=leading, for improved readability, use higher leading for small font sizes and smaller for larger font sizes.
Well, this is it from my end. Do let me know you thoughts or questions if any. Our design community is a small one, let's grow together.
