Tackling Digital Typography in a Multi-Device World

Go Down

Once upon a time, designers had thousands of typefaces to choose from. They would carefully select fonts, sizes and positioning for projects, and items would be printed to their specifications. Since the design would only be featured in one medium, such as a brochure, designers always knew how their work would appear.

With the embrace of web design, the typeface game changed because browsers were initially unable to support more than a few fonts. Recent advances in technology such as Adobe Typekit, Google Fonts and Font Library allow designer fonts to legally appear online. Now, fonts must not only display correctly across a variety of browsers and screen resolutions, but also on tablets and mobile phones. To make matters even more complex, designs must adapt to horizontal and vertical configurations on mobile devices.

The transition into a multi-device and multi-screen world comes with plenty of unexpected challenges for designers, who must find new ways to create seamless user experiences. Responsive design is one way to foster accessibility for all users, and a fundamental element of responsive technology is mobile typography. Many factors contribute to innovative web design, but there are four major considerations for effective mobile typography, including readability, contrast, space and responsiveness.

Readability

Users must be able to easily peruse the information on a website or they’ll bounce off the page and move on to something more legible. That’s why it is important to balance the content’s readability and font size with unique design goals and audience needs. As an example, our Miami agency team implemented these ideals during the development of a responsive site for our client Yankee Freedom III, a ferry that offers daily trips to the Dry Tortugas National Park.
Image of Dry Tortugas Mobile Website Here, you’ll notice that the typography remains easy to read even on a mobile screen. By carefully selecting a simple font and appropriate character size, our client’s message comes across in an accessible and visually appealing way.

View this responsive website in action.

Contrast

Have you ever visited a site with a red font color and purple background, causing you to shield your eyes and navigate away from the page quickly? That’s an example of a migraine-inducing mobile typography flaw: lack of contrast. For our client Island Dogs, a breezy Key West bar home to the Key Lime Pie martini, contrast is a key design feature of their new responsive site:
Image of Island Dogs Mobile SampleIsland Dogs’ signature black and yellow color scheme was adapted to create a user-friendly space with attractive contrast. Not only can you watch 15 second mixology videos on the site, you can also read the recipes with ease and make your own delicious drinks right at home.

Space

Mobile screens are pretty small. Cramming lots of text into a mobile site just makes it more difficult for readers to decipher the message. This applies to other elements on a site as well, such as images. Image of Island Dogs Mobile Website Sample The Island Dogs website utilizes space to captivate users and embody the open-air feel of the bar online. In turn, each element becomes stronger and more impactful because it’s given a space to shine.

Responsiveness

Finally, responsive typography is critical for a website’s success. Just as a site must adapt to fit all types of devices, typography should also remain easy to read no matter what screen size is used. Our website for Turtle Kraals, a Caribbean-inspired restaurant nestled on the Key West waterfront, incorporates responsive typography to create the best possible experience for each visitor.

Image of Turtle Kraals Responsive Website Design Typography is back and more challenging than ever. Designers must be both artists and engineers to craft the ideal user experience. While this is no easy task, it’s ultimately rewarding to create compelling design that works in so many ways.

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact Us

Get the latest from BlackDog

Go Up
Share This