Typography is arguably the hardest part of UI design. In this article, I will teach you some practical tips that you can use in your projects.

First, consider the user

We should remember that, in addition to aesthetics, we have an audience.

You need to be flexible with the fonts you use. Your font should offer different widths of thickness. It’s important to note that good typography is “transparent” to the reader, but bad typography makes people scream from the monitor.

Knowing what font is the easiest to read and looks the most concise overall, we should choose which font to type in.

Legibility

Legibility is a measure of how well one letter is distinguished from another in a particular font. It is microtypeface, focusing on fonts, letters and details. Naturally, this is one of the most important factors. Not all fonts are created with legibility as the primary design function. The most common problem is not distinguishing between a capital L and a lowercase L. You need to avoid this font because people have problems reading on small monitors.

Height of 1.

Ninety-five percent of the letters we read are lowercase. The larger the ratio between uppercase and lowercase letters, the easier the font is to read.

2. Counter

Letters also need space. For example, look at “O”, “U” and “D”. These Spaces are considered by counter and typography professionals to help us identify letters more easily in counters.

Width of 3.

A thinner font is usually easier to read than a wider one.

4. Wide scale

The relation between the width of a letter and its height is called proportionality. The optimal stroke width is about 18% of the height.

5. Letter spacing

There is no definitive way to calculate letter spacing, but most of the time, the larger the letter spacing you need, the larger the text size. Fonts will appear too open and will require manual spacing. For UI design, it usually applies to the header.

Iii. Readability

Readability is about the overall reading experience. How we can easily scan text layouts and distinguish headings, subheadings, paragraphs and blocks. Its macro typography is to make the text more visually appealing in order to make it more inspiring to read. It’s an art of contrast, color, size, composition and small details that can make reading a better experience for the reader.

1. Serif fonts and sans serif fonts

History tells us that serifs are easier to identify. They have been used in print for a long time, and they really enhance the reading experience of large blocks of text. Serif allows the eye to flow more easily over the text.

But there are a few designs that are readable without serif lines, and the current state of visual design prefers simple alphabetic forms. On the web, especially on mobile phones, we’re seeing more sans serif designs, which make people look simpler.

Of course it depends on your project and your audience. In the media, for example, because most of the time you read very long text. Serif is a good way to design.

2. Golden ratio height

The height of the golden ratio can be used.

Multiply your text size by 1.618 and you get the perfect line height.

For small calculations, you can use –JSBI.COM/TodiDu/1/*

If you are experienced, you can adjust the result manually. Of course, there are exceptions to this rule, and you can always break it if you have to.

3. Text spacing

Too wide a space between texts can make it difficult for our eyes to find the next line of text. If the spacing is too narrow, the eye can easily mistake this line for the downward one, often breaking the rhythm of the reading.

To motivate readers and engage them, your text should be between 50 and 75 characters long.

4. Color

Here’s a color tip. Try not to use a solid gray or black color, depending on the needs of your project. You can also choose your favorite color here:

It will be much more attractive and unique than using plain #CCC. Make your visual effect better.

5. White space

This is an important topic and there are many books and magazines that need to keep this in mind when it comes to typography:

The basic function of white space is to reduce the amount of text visitors can see at one time.

This makes our layout more scannable, and it doesn’t overload our content. Leave space to guide our eyes through the layout, creating a sense of order and elegance.

Hierarchies define how the reader reads the content. It tells us how to distinguish between headings and subheadings and body text. We can do this by using different contrasts, text sizes, spacing, and so on. This is an important skill to master in order to achieve good readability.

conclusion

Learning typography is an important journey, and skills do not come from reading articles, but from learning and doing. So you need to practice a lot and create something great!

“The greatness of art lies not in discovering what is common, but in discovering what is unique.” (Isaac Basvenis) Singer (1904 — 1991)

If you want to learn more about the skills of web front-end design, web layout knowledge can go to learn about the “European and American fan Web design actual combat course”, if you do not have PS foundation can go to learn about the “PS web front-end design foundation” you will have more harvest ~