Mobile Typography in 2016: Trending Techniques in Designing for the Small Screen
Device fonts aren't just scaled down for the palm of your hand—a designer weighs in
Our screens are shrinking, from the newest little sister in the iPhone fam or on wrist-computers that are becoming mainstream. Designer Carrie Cousins at UXPin shares her tips for typography’s present and future.
Typography for small screens does not mean small type.
Good typography starts with a solid understanding of the foundation of good lettering. And extends to applying those concepts to smaller screen sizes and thinking about how responsive typography comes into play. When it comes to type, one size does not fit all.
In this piece, we’ll explain some trending techniques for responsive and mobile app typography in 2016.
When it comes to lettering, typeface selection is everything. This includes everything from the type family you choose to work with to size and to how typefaces are incorporated into the overall design.
While the trend in mobile skewed toward thin, condensed typefaces with an uber-modern feel, that concept was rather short-lived. Nowadays, typefaces are somewhat thin- to medium-weight with uniform stroke widths.
One of the arguments for using sans serif is that it is easier to read on screens. Another way to ensure that your copy is readable is to keep it to 30-40 characters per line. Most text is one of three colors—black, white or gray.
Again, this comes back to readability. Text needs to be separate from the background whether it is a color or image or video. Avoiding a lot of colored type is an easy way to do that. The common color values used are #0D0D0D, #0F0F0F and #141414.
Look at the example above with Fitbit. The gray lettering is easy to read, even against some of the more subtle gray backgrounds. This contrast without “extreme” contrast is easy on the eyes, especially when it comes to digesting a lot of information.
If you’re building a website, responsive typography is required to scale properly across devices After all, the same 16-point type looks quite different on an HD monitors and smartphone screens.
Here’s a few tips described in the free 2016 UX Design Trends Ebook Bundle:
- Select a typeface with smooth edges for optimal readability
- Avoid novelty and script styles
- Consider web font integration for device-agnostic typography. Many tools, including Google Fonts and Adobe’s Typekit, integrate directly with apps and responsive websites
Alignment Strays from the Center
Left, right, justified? When it comes to alignment, don’t overthink it. In most cases text should be aligned to the left margin with a ragged right side or centered.
Avoid justified text. It can get hard to control, with odd (and distracting) spaces that form between words or letters. Ragged text has a more natural feel to it and helps maintain consistency in lettering. It’s easy and comfortable to read, and won’t leave odd design gaps due to varying column widths.
How do you know when to center or when to left-align text?
- Use left alignment for larger blocks of text. Anything that requires actual reading should be left-aligned. Left alignment also works nicely for text elements that fall into a grid, card-style containers or in chunky blocks of text that are supposed to be read together. Think Twitter: Each text element is 140 characters or less, but most users read multiple text elements back to back.
- Use center alignment for special, short bits of text. Centering can be the perfect solution for a headline or simple call to action. Center placement is also a popular choice for buttons because users can easily reach them with either thumb.
Screengrab: That Backpacker blog
Another option: try mixing centered and left-justified options, especially when there’s very few words. This technique works well with a centered headline and ragged body text. The contrasting alignments make for a natural and easy reading experience. This is a popular technique with blogs, such as That Backpacker, a popular travel blog.
This might go against everything you have ever heard: Tone down the contrast a bit. You don’t need to only use black type on a white background to make content readable.
Think about Amazon’s Kindle e-reader for a moment. It is the standard in readability among digital devices. And it uses shades of gray to display text and backgrounds. This same concept applies to many of your favorite websites as well.
Eventbrite and Airbnb use a color and contrast framework that emphasizes subtle grays, rather than stark black and white for backgrounds and text. On mobile devices, both sites are super easy to read—so much so that you probably don’t even think about it. Both websites use white text only when overlaid on top of a photo or video background that provides ample contrast, but without being too stark.
In terms of contrast, the most important consideration may actually be size.
When it comes to size, there are no simple answers. That’s because it hinges on the size of the device canvas. It is best to think about typography size in terms of how wide the canvas is in relationship to how many characters fit across the screen. While standard font sizes have been creeping upward, about 40 characters per line is a good place to start.
As recommended in the free guide UX Design Trends 2016, users should not have to pinch and zoom to read the words on the screen.
This character count mirrors the flow and readability standards of physical items, such as books and magazines. The smaller the canvas, the smaller the character to width ratio.
This concept is why many larger designs, such as newspapers and magazines, use multiple columns to maintain a reader-friendly experience. And the optimal character to column width for body text is around 40 characters, proving that everything old is new again.
Fewer Levels of Hierarchy
To further enhance the reading experience, designers are downsizing the levels of text.
On mobile, the hierarchy tends to focus on two type styles and sizes—a headline and body text. Secondary elements, such as links or subheads, are becoming less common or tend to mirror one of the main two styles.
When it comes to creating hierarchy for most types of design, you scan from left to right and top to bottom. Few mobile designs contain more than one block or column of text, so the user can ease though one bit of typography to the next in the course of scrolling.
On smaller screens, there is only one (maybe two) thing to view or read at a time, making the standard H1, H2, H3 etc. typographic levels unnecessary. In many cases, two levels of type are enough.
The Flipboard app does a nice job with type hierarchy. The website actually uses three levels of typography—headline, byline and body text—but the middle one is removed from some screens depending on the type of content. The type design uses a serif body font, which is elegant and somewhat unusual for this style of website, along with a sans-serif headline. The end result is highly readable, and almost book-like.
All this boils down to keeping hierarchy simple with mobile typography. A headline and body typeface is all you really need.
For responsive sites and mobile apps, thin is out.
Medium and medium condensed are in. MyFonts keeps a running list of the most popular fonts. Among the top 10 are Proxima Nova, Museo Sans, Pluto Sans, Helvetica Neue and Futura. All are medium weight sans serifs with somewhat condensed letterforms.
The pendulum shifts to smaller typefaces again. As the focus has shifted back to typefaces that are highly readable at almost any size, designers are opting to go a little smaller.
ESPN (above) is one site doing just that. The text inside the “News” section of the app is somewhat small, but remains readable. The text features darker bolder headlines and lighter gray text with plenty of space between lines and a subtle hierarchy. The typography is designed so that it’s easy to read in blocks.
Link management has always been an issue on mobile devices. For a long time, inline links have just been too hard to activate. Designers are starting to figure out clever workarounds. And while it is less about typography, it is a typography-based characteristic. Card-style interfaces are starting to emerge as a common solution. Each card includes a well-designed bit of type with the entire block serving as a link.
Moop (above) does this well. Every block is a dedicated link. This includes the ghost button in the header and every card showcasing one of their bags. While the design is not perfectly card