<aside> 📌 This guidebook is about how to do good user interface typography, from basic things and principles to building layouts and various design elements. This guidebook has a theoretical part about the fundamentals of typography and the principles, and a practical part about building layouts and elements of typography.

</aside>

Basis

Readability

Typeface vs font

Font types

Three decisions

Choosing typefaces

Pairing fonts

Body text

Line spacing

Line length

Principles

Scanning and reading

Primary and secondary

Design algorithm

Modular scale

Vertical rhythm

Responsive typography

Accessibility

Layout

Rhythm and variety

Lines of force

Anchor points

Grouping

Elements

Headings

Text

Links

Lists

Quotes

Tables


With hundreds of illustrations that explain every nuance and principle, this guidebook gives you everything you need to understand how to work with any text for any interface, from websites to mobile applications.

You can open anywhere, have at your fingertips, and get the information you need while working on your project. Some of the principles and tricks described in the guidebook are actually not just about typography, but about creating quality UI design in general. So you'll find a lot of useful things to improve your work and take it to another level.

Why does typography matter

Typography is what readers will judge when choosing a particular site/application. It can be a subconscious decision. Just as people distinguish professional music from bad amateur music.

UI design makes no sense without text. Landing page by Alexander Plyuto.

UI design makes no sense without text. Landing page by Alexander Plyuto.

People see harmony, balance, and rhythm. People distinguish good composition from the bad composition. They do this throughout the day, conducting many comparisons, identification, and analysis processes.

It looks "reliable," it looks "beautiful," it seems to be "well-made," all the result of an analysis of harmony, balance, rhythm, and other basics of perception. People do this analysis in a fraction of a second and base their choices in favor of one or the other. Good typography helps to make a choice.

People can see the difference between good and bad typography in a split second.

People can see the difference between good and bad typography in a split second.

Typography is based on the same natural and mathematical principles as everything else in the world. People can see the harmony, the balance, the color ratios, and the size ratios in good typography and make their decision based on that. So all other things being equal, people will choose good typography over bad.

Typography also has a purely practical purpose. It's about setting accents and separating the primary from the secondary. This is also important in making choices for the reader, especially when there is no time to choose.