Typography in UX/UI design. A complete learning guide

Brief guide description

  • Two PDF files
  • 130+ pages of useful information
  • Basics of working with typography
  • 53 fonts with a free license
  • 30 unique compositions
  • Rules for working with texts
  • Font pair compatibility chart
  • Links to resources

Files

Typography, pdf

Main guide, 123 pages

Text Design Recommendations, pdf

Additional guide, 8 pages

This is a promotional article dedicated to a guide on typography for UX/UI designers. This is the first part of a large complex of guides that will help beginners to master a new topic, and experienced designers to have a summary of knowledge about typography at hand. Without water and lyrical digressions.

Just a reminder that in the previous lessons, which are still available for free, we completed the study of the graphic editor Figma and gained a good knowledge base. New challenges await us. It's time to move on to studying design theory.

Start learning UX/UI with typography

My approach to learning design is based on the idea that the student should first acquire basic knowledge of the graphic editor, in our case, Figma. The next step is to master the theory of visual UI design. Only after that we can move on to more complex topics in UX design.

Right now, we are at the second step – UI design, and we will start with its first topic.

Although it may seem like a minor element, typography is the foundation of any design. Its use can solve many problems with readability, ease of perception, and the overall impression of your product.

In the web space, there are practically no sites that do not use text. Therefore, it is important for a UX/UI designer to understand how to use fonts correctly and how to format text blocks for maximum user comfort. Proper use of typography can make design more accessible and understandable, provide convenient navigation, and a high level of interaction between the user and the design.

Contents of the guides

You can expect two guides. The first one is comprehensive information on typography for UX/UI designers. The guide consists of 120+ pages. Its contents include:

  • Basic Typography Concepts;
  • Types of Fonts and Examples of Their Use;
  • Font Display Settings: Design Approach to Working with Texts. Knowing these rules will reveal the secret of why experienced designers do so well;
  • Working with Hierarchy in Layouts: How to Build Your Own Text Work System in a Project;
  • Choosing Fonts for Layouts;
  • Free Fonts for Cyrillic: Free License, Examples of Combination in One Composition, Support for the Ukrainian Language, and the Ability to Download;
  • Free Fonts for Latin: Free License, Examples of Combination in One Composition, and the Ability to Download;
  • Font Pair Compatibility Table: Perfect for Beginners;
  • Resources: Where to Get Good Fonts and What to Read to Improve Even More.

The images below show examples of the guide's slides.

Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів

How to Integrate a Font into Your Own Design?


I suggest you find ideas for inspiration in ready-made compositions. I see a certain mission in showing designers options for good typography for Ukrainian texts. But I still understand that the global English-speaking market must also be taken into account. Therefore, you will find for yourself 50+ fonts for various purposes with the possibility of instant download.


Everything you see in the pictures is in the guide.

Compositions using fonts from the guide
Guides Fonts

What is the second guide about?

The second guide is recommendations for formatting texts. Don't know how to work with quotation marks? What about dashes, numeric values, or non-breaking spaces? Writing dates, times and phone numbers. All this is also here.

Рекомендації по оформленню текстів для UI дизайнерів
Рекомендації по оформленню текстів для UI дизайнерів
Рекомендації по оформленню текстів для UI дизайнерів

Is this original content?

Yes, I created these guides based on my knowledge, verified sources, and experience gained from mentoring my students. Therefore, I understand the needs of beginners in mastering the material, as well as the specific information that designers will need in their work.

Who are these guides for?

These guides will be useful for:

  • For beginners who want to start studying UX/UI design;
  • Already working designers who have gaps in typography knowledge and need good examples of combinations;
  • All designers who need to choose stylish fonts with a free license for their projects in minutes;
  • For designers who want to have ready-made information on the topic of waterless typography at hand;
  • People of other professions who often deal with the design of texts for the web. For example, creating presentations, advertising creatives, etc.

What is the price of the guides and how can I purchase them?

Guides are sold as a set. Together they have 130+ pages of quality information. The cost of both guides is UAH 399 / $10. You can buy guides in three ways:

  1. Using the "‎Buy" button . You will be redirected to the contactless payment page through the secure LiqPay service. Visa / Mastercard bank cards are required for use. By clicking "Buy", you agree to the terms of the Terms.

  2. Transfer to a non-cash account in Ukraine. To get details for the transfer, write to Instagram @frusia.pro or Telegram @frusia.

  3. PayPal account transfer. For international payments. To get details for the transfer, write to us on Instagram @frusia.pro or Telegram @frusia.

Typography in UX/UI design. A complete learning guide