Web Design: Creating the Right Fonts for Mobile Screens | premiumwd
Design

Web Design: Creating the Right Fonts for Mobile Screens

by chris rodriguez on February 26, 2016

Web design for mobile screens continues to evolve and become more imperative to businesses wanting to capture customers on the go. Even more essential is finding ways to create a UX that's easy to navigate. One element some businesses overlook is making text on mobile screens easier to read. While flat design can usually solve readability issues, it's really the fonts that need more focus.

As web designer experts note, people read on their mobile devices at a more intimate level. Even if many say you shouldn't use excessive text on a mobile site, you'll always have to use some fonts to give information. If a customer can't read it well, they'll likely leave your site in seconds out of frustration.

Mobile users want information in a hurry, so it's time to think about what type of fonts you'll want to use in your overall design. You may have to change the font style based on the screen size.

Let's look at font styles to consider and screen width factors to help you make better design decisions.

 

Considering Size and Space

There isn't any default font size that works for all mobile devices, so you have to consider the screen size while in design phase. The general rule says anything under 16 pixels is too small to read for any mobile display. Before sizing your fonts, though, consider the screen width, and whether people read your content vertically or horizontally.

This becomes extra challenging if you use too large of a font. You may end up having awkward space issues with a bigger font, including hyphenation use, which brings further readability issues.

Many designers simply use responsive design techniques to make their fonts size and shape correctly. Using CSS, you can change the typeface, size, line length, and load time.

As part of this process, you may have to use different font styles for various screens. Yet, science shows one particular font has better readability on mobile screens than others.

 

What Type of Font Style Should You Use?

You've likely heard enough negativity about comic sans fonts to know it's one on most design ban lists. While you can get a quick rundown of what fonts not to use on mobile, one font seems to stand alone for best legibility.

Sans-serif fonts are now the most widely used for mobile screens, and all screens. The reason behind this is the font has more standard form that's easy to scale for different screen widths.

Any intricate or overly thin font won't work well when resized. Considering many of your readers may have visual impairments, stick with fonts that have some element of boldness and more prominent point size.

 

The Layout of Your Fonts

Where you place your fonts on the screen needs special attention as well, especially if you're posting longer sentences. Using minimal text to describe things is always the better design philosophy. Still, you may have to use a long sentence to describe one of your services, or complement the storytelling element of surrounding imagery.

Science shows that having line lengths far below 65 words is essential for all mobile screens. As a simpler guide, you can use the old process newspapers once used of posting around 39 words in a line for narrow column spaces.

Using left justified text is also your best alignment choice for every mobile device. It gives a natural way to read since this is how most people track text lines in all formats. You're better off avoiding justified text since it can sometimes look jumbled when transferred into mobile formats.

Design tips, tricks, and freebies. Delivered weekly.

Get design tips and tricks, latest news from us and some goodies for signing up.
Email Address...
Give it a try—it only takes a click to unsubscribe

You might also like...

 Design / Tips & Tricks

Working With Styles in Css

Creating a branded identity is no easy task. It requires hard effort but it’s also one of the most rewarding…

 Design / Tips & Tricks

How to Create Pure CSS onClick Image Zoom Effect

CSS doesn’t have a pseudoclass for targeting click events, and this constitutes one of the biggest pain points of front-end…

 Design / UI/UX

Adobe Typekit unveils major redesign

Adobe Typekit has just released a long-overdue update to its font browsing interface. Currently still in beta, the new UI…

No comments

Sorry, the comment form is closed at this time.

Subscribe to Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

See why people are switching to use our products. See Features Get Started
+ +

Get awesome design content

Get design tips and tricks, latest news from us and some goodies for signing up.
Email Address...
Give it a try—it only takes a click to unsubscribe
%d bloggers like this: