{"id":3303,"date":"2017-07-24T17:40:01","date_gmt":"2017-07-24T14:40:01","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3303"},"modified":"2023-08-14T18:37:30","modified_gmt":"2023-08-14T18:37:30","slug":"8-typography-tips-for-designers-how-to-make-fonts-speak","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/8-typography-tips-for-designers-how-to-make-fonts-speak\/","title":{"rendered":"8 Typography Tips For Designers: How to Make Fonts Speak"},"content":{"rendered":"

Typography is a way of communication with users. Visual performance and readability of copy in digital products have a great impact on user experience. One of guru graphic designers, Hoon Kim, once said: “Typographic design is visible as well as audible. If you have a great scenario, now it is time to cast good actors.” Typography can become a voice of design. Appropriate typography speaks for itself setting the right mood and transferring a certain message to users. Today\u2019s article presents tips that will assist you in creating effective typography.<\/span><\/p>\n

Typographic hierarchy makes things work<\/span><\/h2>\n

To create a design pleasant for users\u2019 perception, all its elements should be well organized and clear to navigate. Designers set a proper structure by establishing a visual hierarchy. It organizes all the visual elements so that users could easily perceive content.<\/span><\/p>\n

Visual hierarchy can be divided into different parts. One of them related only to the copy elements is called the typographic hierarchy. It aims at organizing copy content by dividing it into various types such as headings, subheadings, body copy, captions, and others. The differences between the types of copy are set by regulation of family, sizes, width, and colors of fonts.<\/span><\/p>\n

Clear typographic hierarchy makes text legible<\/a> and easy to scan<\/a>. Moreover, it\u2019s simple to highlight key parts of the text to draw users\u2019 attention and hitch them to the expected actions.<\/span><\/p>\n

\"mood<\/p>\n

Mood Messenger Landing Page<\/em><\/span><\/p>\n

 <\/p>\n

Consider context and audience<\/span><\/h2>\n

When it comes to the choice of fonts, an essential thing to consider is a context of a copy and a potential audience. Each font brings its own mood to a layout. There are friendly, funny, serious, business, and many other fonts that will fit a certain design.<\/span><\/p>\n

Before you choose a font, you need to learn your client\u2019s goals as well as the needs and preferences of a target audience. Visual performance of fonts influences the first impression <\/span>users get from the product. If the kind of font doesn\u2019t fit the mood which the product aims at, there can be a misunderstanding with the audience. For example, if a designer chooses a font that looks too fun and silly for a business website, users will hesitate if the company is trustworthy. Or, if a product is meant for youngsters, too formal fonts may seem boring.<\/span><\/p>\n

\"website<\/p>\n

Florist E-Commerce Website<\/em><\/span><\/p>\n

 <\/p>\n

Deep attention to mobile typography<\/span><\/h2>\n

Designers often do experiments with typography to make a project original. However, when it comes to mobile UI design, typographers are literally short of space. Mobile screens are quite small which sets a new challenge for designers to cope with restrictions without loss of sense and functionality. Mobile typography requires deep attention to the details from the appropriate size of fonts to compelling tracking and line length.<\/span><\/p>\n

Compared to web design, mobile typography is harder to reach good legibility. The font size shouldn\u2019t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won\u2019t fit the small screen too. In addition, designers need to care about the level of contrast since a screen with ambient light and high contrast can hurt users\u2019 eyes.<\/span><\/p>\n

Furthermore, a designer should think of the typography functionality. Smartphone UI includes clickable text parts and designers need to make sure users manage to use them. If these parts are too small, people can\u2019t press it with a finger and it\u2019s rather annoying.<\/span><\/p>\n

Considering all the tiny details in mobile typography<\/a>, designers can bring valuable products for users.<\/span><\/p>\n

\"wineyard<\/p>\n

 <\/p>\n

WineYard App<\/em><\/span><\/p>\n

 <\/p>\n

Minimalism can\u2019t hurt<\/span><\/h2>\n

Sometimes, when designers aim at showing all the facets of a digital product, they try to use lots of various styles and fonts all in a single design. As a result, they get a design overloaded with unnecessary distracting details and lacking a proper mood.<\/span><\/p>\n

Experts usually try to keep a number of fonts within two or three for the same layout. It allows making an essential contrast between copy elements along with saving the balance and right message of the design. Applying different styles (bold, italic) should also be minimal. They are good for emphasizing really important parts but the overuse of them can make the text look messy.<\/span><\/p>\n

Also, copy content shouldn’t overwhelm users with unnecessary information. Of course, it\u2019s a writer\u2019s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.<\/span><\/p>\n

\"upper<\/p>\n

Upper App<\/a><\/em><\/span><\/p>\n

 <\/p>\n

Text needs to breath<\/span><\/h2>\n

Legibility level highly relies on how much space there is between letters, words, and text lines. Tracking, kerning and leading are the processes of white space adjustment between the typographic elements. White space<\/a> is the area between elements in a design composition.<\/span><\/p>\n

A lack of white space may end in the bad legibility of copy content because it is difficult to distinguish words that are placed too tight to each other. Appropriate white space brings a visual relief to users\u2019 eyes and allows going easily from one <\/span>word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.<\/span><\/p>\n

\"dance<\/p>\n

Dance Academy landing page<\/em><\/span><\/p>\n

Build typography like a scientist, revise like an artist<\/span><\/h2>\n

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it\u2019s is not enough. Clients always require originality and emotion but it can\u2019t be done only by following the written instruction.<\/span><\/p>\n

Designers should never bury their artistic souls. Imagination and the sense of beauty bring uniqueness in any project, even the most casual one. Find the balance between the strict rules and unordinary choices, and the results may surprise you and your customers.<\/span><\/p>\n

\"gourmet<\/p>\n

 <\/p>\n

The Gourmet Website<\/em><\/span><\/p>\n

 <\/p>\n

Colorful typography needs thoughtfulness<\/span><\/h2>\n

The topic is actively debated. Some think there is no room for color in typography and some claim it\u2019s a must-have for good-looking design. There is no point in looking for the right side of the dispute because there is no accounting for taste. Nevertheless, colorful typography does exist and designers apply it quite often.<\/span><\/p>\n

Among the advantages of colorful typography, let’s mention the element of emotion it adds to any UI as well as the ability to highlight points of interest for users. Moreover, each color may transfer a certain message since it has an influence on users\u2019 minds and behavior.<\/span><\/p>\n

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it\u2019s easy to turn UI into colorful chaos. Here is the useful checklist for this case:<\/span><\/p>\n

Make it contrast.<\/strong> A big problem that colorful typography may bring is bad legibility. The proper contrast between the fonts and background will help to avoid it. However, make sure the contrast looks pleasant and doesn\u2019t hurt the eyes.<\/span><\/p>\n

Don\u2019t use too many colors<\/strong>. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.<\/span><\/p>\n

Color harmony.<\/strong> Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.<\/span><\/p>\n

Be careful with effects.<\/strong> Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.<\/span><\/p>\n

\"bookswap<\/p>\n

Book Swap App<\/em><\/span><\/p>\n

 <\/p>\n

Learn the basics of typography<\/span><\/h2>\n

It may sound too obvious still some designers ignore learning basics of typography science. They rely on modern tools that automatically choose the fonts or just hope the aesthetic features of chosen fonts would be enough. Such an approach seems like learning to read without knowledge of the alphabet.<\/span><\/p>\n

Designers who don\u2019t know the concepts and the anatomy of typefaces can\u2019t use the potential of typography at the full strength. Everyone decides for oneself if they need to learn the science in depth but the basics are a foundation of every craft.<\/span><\/p>\n

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that\u2019s why there are so many useful books on typography for designers. As the recommended reading we can name<\/span><\/p>\n