Need to transform design to code? Don't hardcode it, Avocode it!
See how
September 13, 2016

3 things to keep in mind to master Responsive Typography

Digital Experience Designer. Playing with shapes, animation and interaction. Helping various clients craft experiences for users.

A user interface is like a joke. If you have to explain it, it’s not that good.”

If you think Content is King, you better treat it with novelty

Typography is a huge topic, but when it comes to responsive design – not so much. Most web designers tend to overlook it.

Web design has evolved from one size screen to hundreds, no, wait, millions. Your website is accessed by people on laptops, smartphones, watches and soon smart microwave ovens. Yes, even that.

What are the 3 things to consider when choosing a typeface?

1. Readability

Could you actually read that? Could other people read that? Could people with disabilities read that? Remember, not everyone has the same conditions as you. As a designer it’s your responsibility to keep in mind, for whom you are designing. If you fail to deliver readable text, there is no reason of being there at all. iOS supports changing size of used font in UI, keep it in mind.

Understand the nature of devices

What people use everyday and through which they consume your content pretty much defines their experience. From wearables, to mobile, through tablet, PC to TV. Let’s consider space.

Remember visiting doctor doing eye tests, reading letters from a poster?

You were told where you need to stand, for the sake of relevant result. If you came closer, smaller letters would be easier to read.

Check the distance

What is the distance from which we look at our displays? For example when it comes to buying a TV, you might have seen this chart about what screen size you should consider buying, depending on the distance which you are watching from.

Your FullHD 1920x1080 television could have the same resolution as your PC monitor. At this point, DPI or Dot (pixel) Per Inch comes into play. It’s how many pixels fit in one inch squared. For TVs, it is usually more because our eye is unable to recognize pixels that are far away. To better understand screen-watch distance, I did some quick research and measured the distance from eye to screen.

What happens when you choose 16px, Arial on all of those screens?

DPI will do it’s job and adjust perceived size of font. You can stop here and say it’s done. However, when you are looking for a perfect result, it’s a great starting point for tweaking and considering distance.

When we put devices in perspective, this is what happens:

In general when designing responsive typography for good readability, it’s good to start from 16px on mobile and tablets to small notebook screens. On FullHD monitors, it’s good to increase to 20-22px. It’s a rule of thumb I find useful and good to start with; however, this all depends on various properties of the used font. So let's break it down.

You can see by just looking, the right version just feel good.

Setting up Sketch for boosting

When it comes to designing, you should always prepare the screen size for what are you designing. Developers in Sketch understand how it works on web, so they created amazing Sync Text Styles. When designing for various devices it's good practice to create a set of fonts for every different screen size. In real life it looks like you will have multiple Headings, and paragraphs.

Using such font sets will speed up your workflow, because you are always aware of styles and it’s quick to duplicate when you are in flow. Recently, Nils Hoenson published a Sketch plug‑in that is able to export your Text Styles to a .json file so you can export it with every project you deliver. Or better, import existing styles. To summarize, it always pays off to pay attention to good typography on all possible devices and to not let computers decide this for you. Start using the principles mentioned here and your readers and content creators will love you.

2. Contrast

How do your letters stand out from the background? Experimenting with images on a background creates a poor contrast ratio and hard readability. You can check the contrast of the paragraph easily by squinting your eye: you will see the overall color of the typeface. Visual contrast of the paragraph can be modified by color, line height, character spacing and font weight. When designing, also check the contrast ratio by using this tool: Rank 6 means your body text is well readable, rank 4 is well ascended text. Of course bigger, contrast means it has better readability, even for your grandma. Keep your grandma in mind when designing.

3. Visual Rhythm

If you've ever heard Beethoven’s 5th symphony, you will consider this guy a genius. Highly intelligent people understand that harmony (and what is pleasant for people) is based on a set of rules. Fibonacci taught us it’s true. When designing, it’s good to follow a set of rules and sometimes break it to create tension. The easiest way to get into visual rhythm is use a grid. Adjust type to the base of the grid or place it in the middle of 2 blocks. It’s up to you how you handle it and what works better for you. You are the creator of rules and you are the one to break them. May the grid be with you.

And a few more tips:

A) Strive for simplicity

The golden rule of 2 fonts per website might seem limiting, but remember there are many possibilities on how to make one font look different from the other. You can make it all uppercase, play with color, font-weight, character spacing and so on.

B) Inspect

Here are my two favorite tools to inspect website fonts:

  • Fount identifies web fonts on any site.
  • And this Chrome extension will help you instantly get the fonts you like on a particular website.

C) Steal from others

Not literally copy and paste, but examine and understand their work. When you stumble upon great typography work, check what type it has used, examine it and learn from it. Put it to your Pinterest mood board.

One of the most influential Czech type maker Frantisek Storm.
My personal favorite Ondrej Job.

Thanks for reading and I hope it's been helpful! Please, if you know about any cool tools that you're using for getting or working with typefaces, let me know in the comments. ✌🏼

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: