All you need about Typography as a UX/UI Designer (2023) — Part 2
Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. It involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages. (careerfoundry, 2022)
By the way here is part 1 if you don’t read it yet.
- Sans-serif & Serif
- Typeface
- Font pairing
- Font size
- Font weight
- Letter spacing / Tracking
- Line height / Leading
- Line length / Measure
- Baseline
- X-height
- Capitalize
- Type scale
Lineheight / Leading
The line height or the leading is the vertical distance between lines of text.
As a rule of thumb the ideal line height to use is 1.5 times the height of the font for body and 1.2 for title.
For example — for 16px text you could use 24px leading which is within this range. But also remember to optically judge, read the content and put it in front of users for testing and feedback.
I personally use the range from 1.4 to 1.8 for body and from 0.9 to 1.2 for title. Note that you should not adjust leading more than 2.0 times because it so much spacing between lines and they make user track your content harder
Line length / Measure
The line length or the measure is the character width of a text block. Line lengths that are way too wide, or too short make it difficult to read.
For blocks of body copy the ideal line length is between 40–75 characters including spaces for an optimal reading experience.
The point is you can totally deal with line lenght and don’t need to make sure they always around 40–75 characters, how about the mobile view and the large screen right? They depend on your context, here is just a recommendation for optimal user readability and make your content have a better experience when tracking.
You can check the line length of your work by selecting the first row of text and pasting it into http://www.lettercount.com or others same.
Baseline
A baseline is a unit of measurement for vertical rhythm and alignment. Imagine it as invisible horizontal rulers that line a page, screen or layout. It allows considerations for thoughtful spacing of page elements and type, we typically combine them with grid.
Grids and type go together like bread and butter or tomato and basil. Grids create order and consistency in a layout, page, screen or system. It takes the guess work out and makes sense of negative space. It helps to align elements both vertically and horizontally. It gives guidelines for multiple designers working on a project
X-height
When someone designs a font family, they are usually designing it for a specific purpose.
Fonts meant for title usually have tighter letterspacing and shorter lowercase letters (a shorter x-height), while fonts meant for smaller sizes like body content have wider letter-spacing and taller lowercase letters.
Keep this in mind and avoid using condensed typefaces with short x-heights for your main body UI text and vice versa for title.
Capitalize
The letter-spacing in most font families is optimized for normal “sentence case” text — a capital letter followed by mostly lowercase letters. Lowercase letters have a lot of variety visually.
Letters like n, v, and e fit entirely within a typeface’s x-height, other letters like y, g, and p have descenders that poke out below the baseline, and letters like b, f, and t have ascenders that extend above.
All-caps text on the other hand isn’t so diverse. Since every letter is the same height, using the default letter-spacing often leads to text that is harder to read because there are fewer distinguishing characteristics between letters.
I personally use All-caps for lead text, title which equal 4 cases or fewer, you can also use Capitalize Case as well.
If you your title too long, avoid All-caps and Capitalize Case, instead you can use it just lower case and your title will be improve the readability.
Type scale
Just like with spacing and sizing, a linear scale won’t work. Smaller jumps between font sizes are useful at the bottom of the scale, but you don’t want to waste time deciding between 46px and 48px for a large headline.
One approach is to calculate your type scale using a ratio, like 4:5 (a “major third”), 2:3 (a “perfect fifth”), or perhaps the “golden ratio”, 1:1.618. This is often called a “modular scale”.
Using a 16px base and 4:5 ratio, your scale will end up with lots of sizes that don’t land right on the pixel, like 31.25px, 39.063px, 48.828px, etc. Browsers all handle subpixel rounding a little bit differently, so it’s best to avoid fractional sizes if you can avoid it.
There are more practical approach is to simply pick values by hand. You don’t have to worry about subpixel rounding errors this way, and you have total control over which sizes exist instead of outsourcing that job to some mathematical formula.
