interface typography — Design4Users

Mobile Typography: 8 Practices for Powerful UI

Marina Yalanska — Wed, 07 Feb 2018 15:08:58 +0000

Mobile design heavily depends on every detail it consists of. Screens are quite small so designers need to choose elements thoughtfully trying not to overload user interface. Such a peculiarity makes typography creation for a mobile rather tough task. Mobile typography requires deep attention to the details from an appropriate kind of fonts to compelling tracking and alignment.

No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.

High level of legibility

Legibility is called a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing clarity of text.

In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It’s a misbelief. Small fonts on a bright mobile screen can make user’s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it’s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is a key to pleasing UX.

Leading

As we’ve mentioned in our previous article, leading is the spacing between the baselines of copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.

To-Do List App

Line length

To make body copy comfortable for reading in mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won’t work same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of character per line within 30-40.

White space

When design elements are tightly gathered in a bunch, the user interface looks messy and navigation is rather difficult. Designers need to give elements space to breathe bringing a relief to users’ eyes and mind. The size of mobile screens doesn’t allow using much of white space that’s why a balance between the elements has to be found.

Wine Year App

Fewer levels of hierarchy

Visual hierarchy is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.

Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.

Moneywise App

Simplicity of fonts

A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.

Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it’s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.

Book Swap Interactions

Delicate contrast

Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, contrast may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users’ eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.

Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that’s why size contrast should be also reduced.

Jewellery E-Commerce App

Responsive typography

People surf the Internet via all devices available today. That’s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.

Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.

Cinema App

Prioritized content

To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have a fast access to information they are looking for and mobile screens can make the process complicated.

Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users’ needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.

Book App

Clear text rags

Depending on the type of a product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such structure is difficult to scan on a mobile screen.

Healthy Food App

Functional typography

While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many text elements in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.

Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.

Menu Interactions

Things to jot down

Minimalism. Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.
Test the smallest first. Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it’s ready, you can easily adapt it to the bigger sizes.
Avoid decorative and cursive fonts. They don’t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.
Legibility first. Of course, it’s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good-looking text is not enough. Make sure it is legible otherwise users won’t be able to read information and use your product properly.

Jewellery App

Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.

8 Typography Tips For Designers: Make Fonts Speak

Marina Yalanska — Thu, 11 Jan 2018 15:32:13 +0000

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’s article presents tips that will assist you in creating effective typography.

Typographic hierarchy makes things work

To create a design pleasant for users’ 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.

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.

Clear typographic hierarchy makes text legible and easy to scan. Moreover, it’s simple to highlight key parts of the text to draw users’ attention and hitch them to the expected actions.

Mood Messenger Landing Page

Consider context and audience

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.

Before you choose a font, you need to learn your client’s goals as well as needs and preferences of a target audience. Visual performance of fonts influences the first impression users to get from the product. If the kind of font doesn’t 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.

Florist E-Commerce Website

Deep attention to mobile typography

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.

Compared to web design, mobile typography is harder to reach good legibility. The font size shouldn’t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won’t 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’ eyes.

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’t press it with a finger and it’s rather annoying.

Considering all the tiny details in mobile typography, designers can bring valuable products for users.

WineYard App

Minimalism can’t hurt

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.

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 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.

Also, copy content shouldn’t overwhelm users with unnecessary information. Of course, it’s a writer’s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.

Upper App

Text needs to breath

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 is the area between elements in a design composition.

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’ eyes and allows going easily from one word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.

Dance Academy landing page

Build typography like a scientist, revise like an artist

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it’s is not enough. Clients always require originality and emotion but it can’t be done only by following the written instruction.

Designers should never bury their artistic souls. Imagination and the sense of beauty bring uniqueness into 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.

The Gourmet Website

Colorful typography needs thoughtfulness

The topic is actively debated. Some think there is no room for color in typography and some claim it’s 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.

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’ minds and behavior.

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it’s easy to turn UI into colorful chaos. Here is the useful checklist for this case:

Make it contrast. 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’t hurt the eyes.
Don’t use too many colors. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.
Color harmony. Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.
Be careful with effects. Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.

Book Swap App

Learn the basics of typography

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

Designers who don’t know the concepts and the anatomy of typefaces can’t 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.

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that’s why there are so many useful books on typography for designers. As the recommended reading we can name

The Elements of Typographic Style by Robert Bringhurst
Typographie: A Manual of Design by Emil Ruder
Just My Type: A Book About Fonts by Simon Garfield.