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.
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.
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.
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.
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.
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.
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.
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.
Here are my two favorite tools to inspect website fonts:
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.
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. ✌🏼