Want a more detailed and pixel perfect Typography? Here are some rules you can apply.
Plenty of designers talk about typography with difficult or research-based articles, through searches, I summarized them with more practical and clear standards for UI design and for users’ better reading.
Everything starts with Types and Fonts
1. Modular Scale
The website below can easily help designers to calculate the best ratio system with different google font. You can also try various systems, such as perfect fifth or Augmented fourth on the site. (Thank god! Thank the developer of the tool!)
For my design habits, I usually set 16 pixels as the based size (depend on 1em for engineering setting) which is from the Golden Ratio calculation 1:1.618. Further, on the basis of the latest use of 2018, the more reading friendly font size for web text is 22 pixels.
I used to set the Font Scope with Perfect Fifth which makes the programmers code easier. 🙌
But it still depends on who I collaborate with, what are the user-oriented ways or business strategies to decide a more suitable method for the project.
2. Reader-friendly Line Height — 140%-150% of Font Size
So now, you may amaze about the optimal font-size system calculated by the useful and powerful website. But how? How can this site also provide you the line-height? How should a UI designer do in the next stage?
That’s talk about line-height first. After input the font info to the website, the default value for line-height shows 1.45 which means the based font size multiple 145% (16 pixels × 145% =23.2 pixels). The actual value is 23.2. But here’s the question, why is 1.45? As my research for several articles, a more suitable line height for user’s reading eye is 140%-150% of the font size.
The website might select a middle rate for default. But for me, I used to set 150% to make the paragraphs remain more ‘breathing space’, so it would be 24 pixels. Well, you can change it and pick one that suits your design.
3. The magic number — Line-height 24 pixels ×
According to the based font-size, we now gain the line-height which forms the font’s total size can compare and arrange with other elements on the page. So the line-height — 24 pixels can be considered a magic number for setting the height of pictures’ and banners’ reference (24 pixels’ multiplied numbers).
Line Width
Easy to read Line-width range — 45 to 75 characters
After discussing the line height, how about the width? The ideal reader-friend range that all designers should strive for between 45 and 75 characters.
Referring to multiple articles and summarize. I excerpt Prof. Laura Franz’s content from Size Matters: Balancing Line Length And Font Size In Responsive Web Design as below.
65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Determined from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print. Many web designers (including me) apply that rule directly to the web.
Reference
The ratio scale section is around 3:15. You can check out the detail talk via this video.
That’s A Wrap
Read so many articles as reference make me rethink about my design and find the details with them. It’s really joyful that find the problems and find ways to modify them. Next article, I want to do research on layout and components arrangement. If you have any advice or sharing, please feel free to contact me.
The above standards are the suggestions for designing UI perfect deliverables, you can, of course, apply your own method and make flexible adjustments for the design works. Ultimately, the more perfect typographic still rely on our keen eye, isn’t it? 🙃
See ya~
