Typography tips for a better user experience

Studio Function
Apr 7, 2016 · 7 min read

The average person with a smartphone or laptop and a stable internet connection probably spends more time interacting with typography in a single day than with food, music, and family combined.

The majority of the web (and our lives) is type-based. That was the case in 2006, is still the case 10 years later, and will continue to be true until the day we’re all communicating via holographic emojis (2020?).

While we wait patiently for the HoloMoji™ revolution, it’s important to treat type-based communication with the respect it deserves. We each have a small role to play as content authors, digital publishers, developers, and designers to take responsibility for the material we create and share with the world. This is especially true if we’re being paid by other people to make their content look great and communicate effectively.

Here’s a list of 5 easy ways to improve the typographic quality and effectiveness of any website, email, or digital product design.

Tip #1

This might not seem like a huge deal, but it’s an easy tip that can be implemented with minimal effort.

The content above could benefit from a better use of vertical space distribution to more clearly group the related image and text, or subhead and text.

It can be difficult for a reader to know how to group page content when lines of text are evenly distributed above and below a subhead or image (especially on longer article pages with multiple images throughout).

When readers have to struggle to understand content association, the design becomes cumbersome and demanding. Readers want to feel comfortable, first and foremost. Making clear groupings of content through vertical spacing is a great way to ensure a more positive user experience.

Tip #2

In our opinion, this is one of the most prolific and annoying design gaps currently infecting the responsive web.

This example shows an average of 31 words per line — that’s more than double the recommended length.

It’s been proven that the reader’s eye (aka mind) becomes fatigued when forced to read long sentences. This is actually an easy test to perform any time — just open a long email and adjust the browser width. Compare how the same text feels in a narrower viewport versus the long lines created by a greater width. The same email can feel comfortable and digestible, or completely discouraging and cumbersome. Same goes with text-heavy pages.

Wikiwand is a free browser extension that understands eye fatigue and presents a more comfortable reading experience.

Long line lengths are a drag. People don’t need less encouragement to read. Also, it looks cheap. It’s a quick way to say “We don’t really care about the design of our material and the reading experience of our users, or we’re too ignorant to notice!” Oops.

Not many people (including designers and developers) are conscious of this issue because no one’s ever pointed it out. The problem is additionally sustained by the convenience of elastic dev frameworks and a lack of consideration with responsive layouts. Sadly, a text container that fills the width of a small viewport can’t be stretched to fill the width of a large viewport without any additional design consideration.

It may take extra effort to adjust text in various viewport ranges, but the investment is well worth the benefit to the reading experience and the positive non-verbal feeling that will be associated with the design/brand.

The optimal number for characters in a body paragraph is 45 to 75, with a 66-character line (including spaces) widely regarded as the ideal. Sometimes it’s easier to count the average words per line, in which case try to land between 9–13 (headlines can obviously have less). Aim for this and adjust the design when the character or word count for that font size falls out of the magic zone.

Tip #3

It’s always interesting to watch visual trends evolve and respond to a saturation in the visual landscape. One such trend has been born from a desire to push back against the omnipresent digitalness of cold screens and vector graphics. Enter hand lettering and a general romantic energy for a seemingly long-lost culture of doing things manually (from a millennial perspective at least).

To clarify: we love lettering and calligraphy. Hand rendered text, like many things, is beautiful to behold when executed with considerable skill. The problem these days is when people want to capture that energy, but get lazy and opt for a lettering font instead of conducting a more authentic process.

None of the examples above are very convincing. It’s difficult for lettering fonts to deliver a feeling of authenticity.

Our issue isn’t so much with the idea of using a font (there are definite advantages with live text for accessibility and general convenience), but the fact that these fonts rarely feel special and hand made.

Worse is when the same characters appear multiple times in a word or phrase. The essence of hand lettering and all its lovely nuance is lost in a font that only has one letter “e” character. ‘Hand rendered’ words that show repeat letters shatter the illusion. Once the viewer takes notice, it’s hard to fight off a sense of inauthenticity, distraction, and disappointment.

The first image is a screen cap from TSN’s Favela United by TWG. Authentic hand lettering contributes perfectly to the experience — it’s gritty and visceral. Notice how the feeling is lost when the artwork is modified with a font-based example. Repeat characters start looking sad and greatly diminish the overall impact.
This effect is even more noticeable when there are fewer letters to hide behind. The altered text on the right (with three repeat ‘A’ characters) is a great example of fake hand lettering at it’s worst.
Even though the results can be subtle, there is no replacement for the energy and interest generated by true manual execution, as seen in the left image above.

Tip #4

Readers want to read. If the text is captivating enough, they will!

What readers don’t need is a little EXTRA visual spice to help them along and FULLY appreciate the communication.

Abusing multiple type treatments is a great way to hijack the reading experience. It visually disrupts the copy block and (for us) actually makes it more difficult to get through the content because now someone else’s inflection muddies the water. It also looks terrible, and reeks of insecure, smarmy marketing.

Another common issue stems from using too many type styles in general. Though decisively less sketchy than having multiple styles in a single sentence, a lack of sensitivity here can also create pages that look and feel utterly terrible.

The solution isn’t always easy and requires some restraint. Try to be visually understated. Have faith in your copy (or invest in better copy). Learn to trust the beauty and effectiveness of simple typesetting to deliver messages.

Tip #5

Proper punctuation should always be used in headlines and key areas of copy, yet so many brands (big and small) fail to wield it properly. The most common issue we see involves using the wrong text characters for apostrophes and quotation marks.

Always use curly quotation marks and proper apostrophes. Learn how to handle them properly on the web.

Straight quotes are vertical sticks erroneously used in place of quotation marks (“ ‘ ’ ”) and apostrophes (’). Straight quotes are essentially generic punctuation marks created for simplicity and space saving during the typewriter era. This reduction was effective for covering all bases at the time, but technology has long since moved on. It’s funny (not funny) how many of the bent rules from old typing culture still linger in the digital age (*cough, multiple spaces after periods, *cough).

Most people can’t easily spot the difference between these marks in small text settings, but at headline/display sizes straight quotes stand out like sore 8-bit thumbs. Unlike curly quotes and apostrophes which are specially designed to promote unity and flow in the word picture, straight quotes are clunky and distract from the reading experience. They should be reserved for the code editor.

Issues with text setting have existed long before web development and desktop publishing. The world turns, the sky hasn’t fallen yet. But these details do matter when a person or business is concerned with presenting their best. Or when someone wants to express a deeper UX consideration that includes how a reader might feel if/when they encounter a typographic hiccup. Consider how much time and effort Medium itself spends on type nuances.

The tips above exemplify ways typesetting can contribute meaningfully to a user’s overall experience. UX is a big concept that means various things to various people. But just like in other professions, people don’t always like to sweat the small stuff. UX can be flashy and exciting when you’re working through audience research, creative direction, and content strategy but energy can quickly fade when it comes to fussing over seemingly insignificant minutiae.

We believe it’s the combination of amazing details that makes something truly special.

Typography is an invisible craft that permeates almost every aspect of our waking lives. Good typography has a major role to play in the creation of successful, memorable user experiences.

Studio Function

Design rants, raves, and case studies

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store