Guide To Responsive Typography in Web Design

Responsive web design also known as RWD is the new concept in designing. It provides optimal viewing experience for the visitors to any website. It simply means that you can open any website from your computer screens, smart phones, and tablets etc. Easily read the content with the minimum amount of resizing. Back in old days when we had to open any website, everyone had to use the computers, so screen size was not an issue for the web designers. Recently the technology has gone beyond imagination, now everyone who owns a smart phone or a tablet can open any website which he/she likes. Web designers now have to deal with multiple screen sizes and resolutions which is why they use responsive web designing approach while creating any website’s layout.

Many designers consider flexible grid or image as the most important elements in responsive design, no doubt they are very important but the element that we all usually ignore is the typography in web design. Majority of websites are based on text and content which is why many designers would think that is their sites text easily visible on every device? This is a very important question that should not be overlooked by the designers. That is why, in this article we will be discussing about how you can achieve responsive typography in web design.

You might also like: Best Premium Responsive WordPress Themes

Why is Typography Important in Web Design?

It is important to have your websites fully responsive because; majority of users connect to the internet through their mobiles. Browsing is not done through computers only anymore. When we talk about any website, the most important element is the text or content on it. Some designers focus on the layouts and images but forget that in the end people are here to read. Colum width, type size and line height etc. These are all related to typography. Visitors who find your website to be easy readable through every device will surely save the website in their favorites. Let’s start our discussion with some basic principles that you need to remember.

Rules of Responsive Typography

There are three rules or principles that you need to remember while planning typography in web design. The first principle is resizable type. The text that is not only resizable with screen size but, also resizable by the user is called resizable type. The second principle is optimized line lengths. Improving readability on the smaller screens by keeping the content area small and shortening the line lengths is called optimized line length. The third principle is the contrast.

Some designers argue about which font is better to use in the web design; serif or sans serif. Both are very good but san serif is a better choice when it comes to small screens. Expert designers say that serif is good for heading while san serif is better for content when we talk about desktops. But, one should keep experimenting until the best one is chosen.

Resizable Type – The First Principle

Designers use different font sizes but, it should always be mentioned in the style sheet accordingly with screen sizes. Designers most of the time use either Pixel or Ems. The preferred option is the Ems because; it allows users to resize the type in their browsers. However, ems is more complex to use than the pixel. Some designers prefer using rem than ems. Both of these works exactly the same way except for a single major difference: Rem is related with html element rather than the single parent element which makes it very easy to maintain a proper size of the type in your website. Every major browser including; IE9 and Opera supports Rem units now and they are very useful in web designs.


The next thing that you will look is the size of the text that is used in content body. It should not be according to what you prefer rather it should be according to the reading distance. Computers are usually far from our eyes than books so; the size for fonts should be bigger in desktops than then size of fonts that are in books. Text becomes smaller as we hold it far from our eyes. Making the text bigger will give the advantage of reading it from a distance. Deciding how big the font will be is a very important thing that designers have to look carefully. The most important factor is the responsiveness of that font on different screens. Keeping your font large is a better option than keeping them small because; readers who find it big can resize it in their devices while others can enjoy it easily.

Optimal Line Length – The Second Principle

Changing the size and type of the font can be achieved easily by trying different experiments. As for optimal line length, it is difficult to maintain. There is no defined optimal length that will do the work. According to studies, line length between 50 to 75 characters is the best. But, different people find different line lengths better readable for them.

The best way to decide what line length to use is to start according to the different screen sizes. Use 50 characters in a line at first while if your work is for the small screens, you can also go below 50 characters. An important factor is to choose the width for the content area. Set the width according to the font size you are using and consider approx. 75 characters per line. If you are working with small screen, you can also choose no container width because the text will easily spread on the whole device screen.


When we talk about larger screens such as the landscape page on a tablet that has a width of 2048 pixels, things start to change at this point. You can make the readability easy by spreading the content around multiple columns. Using multiple columns are recommended because, if you use one column the readers eyes will become tired of reading very quickly due to the wide width of the page. Let’s compare two different types of screen sizes by taking iPhone and iPad.

iPad vs iPhone

The iPad is generally held a bit further from our eyes. Not matter, where you are using it, it has different varieties when it comes to reading. Designers find tablets a bit challenging because; they are totally different from computers are laptops. That is why the typeface is commonly chosen bigger so that readers can adjust it accordingly. Readers usually prefer to read on iPads or other tablets while they are in bed so font size that is large then usual is helpful for designers. When we talk about the iPhone, the screen size is small so the reader has to make the adjustment manually. While working on smaller screen sizes small types are perfect to use. Designers now know it very well that it’s not about creating the perfect design, it’s about finding the best middle way for everyone.


Contrast – The Third Principle

Contrast plays a very key role when we talk about the typography in web design. A good example is the products of kindle. The e-Book readers in kindle can not only adjust the typeface, font size and line height but they can also change the background color of the book which in result makes the contrast very strong. However, if the color is not matching it can also make the contrast look awkward. Contrast can be a very difficult thing to handle when you use it on your web design. Designers should keep on changing the background colors of their website until they think they have found the best one for their website.

Designers should keep this in mind that all these principles are related to each other in way or another. If you are to modify any one of these, you will have to change the others as well. A bigger font size will offer a higher line adjustment and vice versa. The most important thing to remember here is to keep on testing your web design. The testing will help you in achieving a perfect responsive typography layout eventually. The best way is to try your website on as many devices as you can, so that you are satisfied that your web design looks perfect on every device.

Consider Alternate Typefaces

In responsive typography, importance is not given to how the fonts will work on different screen sizes. There is always a probability that some typefaces will not work properly on different screen sizes which is true most of the time. However, thanks to responsive web design and media queries we can modify the fonts accordingly with screen sizes. Going with the same font size on all the screen sizes is not a not idea, for the best results you have to switch to other fonts also. There are plenty of fonts that will look great on the big screens but once you see them on the small screen, it will be too difficult or sometimes impossible to see. If this happens, the best solution is to keep them on the large screen while just replace them on the small screens with fonts that are more visible. Using fonts such as the League Script in your headers is a good idea when you are designing the website for large screens while small screens such as iPhones, you can make the fonts large or either wise change them. Typography is all about the readability in web design; the better it is the more popular your website is.


Media Queries

Designers who have some experience in responsive web designing can easily put a responsive typography in their website. For beginners, using media queries in style sheet is the best option that helps you to decide which properties you should use for different screens. Most new comers in designing field try to jump straight to responsive typography and don’t know how to code a responsive layout. This is not considered as a good approach because; the responsive typography is only a small part of the whole responsive web design concept. You must understand the basics first in order to have a sound knowledge about what the responsive web designing means actually before moving towards the responsive typography.

Device Holding Position

A very important factor to consider while designing a responsive typography is that how everyone holds the device in their hands while using. This makes the responsive typography so much important. It is not possible to hold the device in the exact same position every time. It will be farther away most of the times when people are reading anything. One good example is the tablet and Smartphone that is always hold at some distance. This difference creates a whole new argument about using the font size, color, height and width etc. This is very important to decide when working on different screen sizes. That is why many designers consider responsive typography, the most challenging and complex thing while working on the RWD.

Concluding the Discussion

In the end I would say that responsive web design mostly focuses on the layout and images that are displaying in the web design. While the typography is not given as much importance, it is in reality as much important as these two elements are in responsive web designing. With the help of different tools, it has now become easier to modify or adjust the typography while working on the responsive web design. In order to achieve the final goal, it is necessary that you put the same time and effort on every element of your web design. Remember, the most important thing at the end will always remain readability of your web sites content. In order to create an optimal user experience, you have to maintain the readability of your text and keep on experimenting with different typefaces most of the time so that your website can stand amongst the top in the web market.