Guide for Using Typography in Responsive Web Design

Ever since Ethan Marcotte coined the term, we have been trying to figure out how a truly responsive website can be made. Five years after the term was actually defined and recognized, we now have a fair understanding of the theorems, the methodology that comes in to play in creating responsive apps.

The thing is that it’s not really about the tools (such as frameworks and effects) but it is about the experience. Just until a few years ago, nobody focused on conversion rates… we designed for the sake of designing. We designed to create gorgeous websites, nothing more, nothing less. But that with the turn of the decade, we started realizing what Steve Jobs meant when he said:

Design is how it works

Image courtesy of Life Hack Quotes

We have learned back in 2006 that a web design is 95% typography. Things have changed since then but the basics remain the same. Typography, which includes all the text in the website, whether it be the biggest heading or the little disclaimer in the footer… it’s all typography.

All our emphasis is on increasing conversation rate and ROI rate… and to that we need to make design work. We need to guide the visitors on every step and we need to persuade them. The only way to do all this focus on the typography of the website. A website that has everything else done in the perfect manner, but no attention paid to typography is like a beautiful car that doesn’t run. It won’t get you anywhere.

Importance of Responsive Typography

With the advent modern digital gadgets, media techniques have changed. In the pre-digital age, there was always the same kind of service broadcasted for all devices. Let’s take an example from Radio. The same radio service was transmitted without keeping the end-device in mind. It did not matter whether the listener had a gigantic aerial antenna radio or a pocket sized transistor, the same service for any kind of device. Same was the case with TV up until the arrival of HD TV.

But today, things have changed; for the first time in history we have to keep end-device in mind. Our medium, the web, is being available on a huge number of devices. From mobile phones to large screen desktops, the screen resolutions usually range from 320 px and to 2000 px. In this scenario, it is indispensable that our websites should be designed and developed keeping all these devices in mind.

Web Devices

A comic from our Facebook Page

The problem of building websites suitable for multiple devices was a huge one, but thankfully HTML5 and CSS3 brought the solution.

  1. Adaptive layouts: refers to adjusting the layout in multiple steps. This is done to limited number of sizes.
  2. Liquid layouts: refers to adjusting the layout ceaselessly to fine-tune according to every possible width

Since readability is more important than design, adaptive layouts soon came as the winner of these two methods. Today, when we say “Responsive Web Design” we are usually referring to adaptive layouts.

Isn’t this article about typography?

Indeed it is, I was just laying the ground. You know, it is hard to learn something when you haven’t distinguished how and why it works.

We were discussing earlier that websites are about 90% text… while the number may seem exaggerated, one thing is clear that text is, has always been and will always be the main content.

In the early days of WWW (not WWII), webpages didn’t have pictures, and that trend is coming back in Responsive Web Design. Why? Because:

  • Text is fluid. It can can be broken into multiple lines, when zoomed in.
  • Unlimited zooming is possible without breaking the whole design.
  • Text loads faster, renders quicker and works smoother, seamless.
  • The latest CSS3/CSS4 offer loads of styling capabilities for text.

Of course we have also made advancements in SVG based resolution independent images as well, but nothing beats text. Some developers are even claiming that it is going to be all typography in near future because images, bitmaps or vectors, create complications to remain device agnostic. On the other hand, text objects are much easier to manage. You can move them around, add handlers and all types of effects… the text does not lose its quality.

Term: breakpoint. This is a CSS declaration that allows the layout to adjust according to screen size of the user. For example, if you set a breakpoint at sidebar, it will shift its place when the website is opened on a small screen.

Now you know the reason why everyone is focusing on typography based websites and why some experts are saying that in future, 99.9% web will be typography.

Once again, this might be an exaggerated number. In fact in my opinion, design world will eventually find a way to get graphics working in RWD. But that can take a good 5 to 10 years and we have to be prepared for the typography age. That age that is lurking just around the corner.

Some web developers have already started to work on responsive typography websites.  Gareth Lawn is an example.

A responsive typography website.

Maybe you are thinking that such designs won’t sell. They don’t have that spark which art designers love. I’d have to say I agree with you… but if such websites start to bring in the numbers, start to make lots of conversions then it will happen.

Random Fact: optimal line length lies somewhere between 50 and 75 characters.

How to make typography websites more appealing

Now we we start the core concepts of this article. Am I advocating dull black and white websites? Absolutely not! Our mind requires visual signals. We need to give those visuals to the visitor in order to guide and persuade them.

Visuals are important

Infographic courtesy of Anne McColl

Once you decide that you are restricting yourself to text only, you can design reasonable designs without images. You’ll pay more attention to CSS based designing.
Mind you: content images are not part of the design. Images of products, maps etc. wouldn’t count as design images. We are speaking purely of the design part, not content.

Ever since online font libraries came into existence, web designers have a lot of freehand to wild on fonts.

Using different fonts for different devices

There’s a saying in Asia that, if translated, goes “you can’t tighten a screw with a hammer” What it means that you have to use the appropriate tool for each task. Just because one thing works at one place, doesn’t mean that it will work at another place as well.

These are seven most essential tips for creating a typography for the web. So here are my basic tips for you to create a website design that works.

  • Design for the mind: Each fonts creates a psychological impact and colors have their own emotions as well. When you design, make sure that your layouts synchronize with the moods of colors and text. Do this thing right, you shall win 90% of the times at least.
  • No Lorem Ipsum: Placeholder text can never show you the real thing. What users will view and what you are seeing as the final results can be two completely different things, hence lorem ipsum is not a good idea. Try to make the design with the real content. If that’s not possible, make sure to deliver your final draft with the real text.
  • Avoid centralized text: This is not a hard and fast rule, and it specially doesn’t apply to headings but where ever there’s a sentence or paragraph that exceeds one line, it should be aligned left (or aligned right if you are making your website in a right-to-left language). It becomes difficult to go from one line of the text to the next when the beginning points are not aligned with each other. Hurts the overall experience.
  • No special characters: This crucial from SEO point of view as well. Search engines aren’t good at recognizing special characters, they like plain text. So, try to use plain text for not just the content but for the headings as well. Say no to long dashes and smart quotes.
  • Keep it zoom-able: These days, users have to open your websites on all kinds of devices. On many devices, they subconsciously just zoom in. So you have to make sure that your design and text doesn’t break down when it is zoomed in.
  • Size does matter: Sometimes, for the sake of the design, we make the text tiny in order to fit it in and get it in sync with our design. That’s a terrible idea! Readability is the first and most important aspect of any design. This something non-negotiable so never ever try to compromise on text size.
  • Read it: You may find this tip hideously obvious, but you have no idea how many of us forget to actually read their websites thoroughly before sending it to the client or making it live. You should scrutinize your designs so that you’d realize if you are breaking the sentence at the right location or not. Also, you must know if the key words of copy are getting attention or not. A great design with inappropriate emphasis goes straight to hell.

Tools for responsive typography

I have only found two jQuery plugins designed exclusively for creating responsive typography. Here are those two:


Since CSS doesn’t give complete down-to-the-letter control so Lettering.js is made to provide you that. It allows you to control

  • Kerning Type
  • Editorial Design
  • Manageable Code
  • Complete Control

A jQuery plugin for creating responsive typography.


FitText makes font-sizes adaptive to all resolutions. But make sure that you use it only for large size text, not paragraphs.

Another plugin for creating responsive typography with help of jQuery.

Root Ems – REM

Do you know about REM? It is a new type unit (such pt, px, em etc) introduced in CSS3. REM refers to Root Ems. This is especially helpful for creating typography based websites. REM units are relative to font size in HTML5 document. So you can define a single font size on the HTML document and define all REM units to be a percentage of those.


The most important element in any website is of course, its content. The most important part of any content is its text. Make it visible. That’s it. That’s what the whole article was about.

A side benefit of creating simple websites is that they are easily editable because they are simple. Complex image based designs are pretty difficult to edit.

Now I leave you with two links. The first one is a tutorial so you can get hands-on experience of developing typography websites, and second one is a short guide to responsive typography.

  1. Handling Typography for Responsive Design
  2. Responsive Typography

Related Read

Since you have read this article through, you might be interested in some examples of great typography-based website designs? Here’s an image from the that showcase.


Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved