You must have heard a lot about Receptive Web Design (RWD), as it is one of the most talked about topics on the internet nowadays.

Nevertheless , most of the moments, grids and images, fluidity and adaptability grab all the attention and there is barely any discussion relating to the typography.

Even though it’s among the essentials that demand importance but many designers mysteriously tend to ignore this factor. In this jot down, my main focus is on responsive typography with regards to the website design.
Content, although the most essential ingredient of any website, blog, online community or directory, is the content as well as the way it is actually presented. But the focus of designers is mostly on the site design. This is where the problem arises.

The adaptable web design currently takes care of this kind of aspect to some extent, by which include some volume of responsive typography. Yet this kind of cannot be known as complete nonetheless it comes packed with numerous typographic options. However , before we go into the facts, let us earliest understand what reactive typography is usually.

What is Receptive Typography?

Reactive typography implies that the text on the site is not only resizable depending upon the screen size in the device, nevertheless is also improved in order to improve readability. Currently, we don’t only work with desktops or laptops to get into internet and browse websites but as well make use of tablets and smart phones.

For quite long, the designers are generally solely centering on website design to make it adaptable to the numerous screen sizes. There has been nearly or almost no effort built to optimize or adapt this article and its presentation according to the screen size. Receptive typography address this issue, giving an opportunity to designers to experiment with this also.

Basic Principles of Responsive Typography

The concept of responsive typography works on three basic principles:

Resizable text
Optimization of set length

Whenever you make any decision about the presentation of text, this obviously starts off from the font type. Regardless of what type of typeface you are employing, but you need to make sure that this content can be without difficulty read. If you want to keep it sensitive, the only options are Serif and Sans Serif. Serif is generally utilized for headings or titles, while Sans Serif is used for the rest of the content.
The logic is fairly simple. The Sans Serif font provides you with more freedom to experiment with. Therefore , you can actually use that for the major chunk of this text. The Serif font, according to the designers, is quite severe, thus so that it is a perfect choice for titles.

Resizable Text

When choosing the font size for the text on your website, ensure that you specify this in the stylesheet according to different screen sizes. Although how to decide the correct font size is another concern. For this the rule of thumb is usually experiment with you.

Yes, pick the font size and examine how it looks when you focus on a desktop, a tablet and a smartphone. Understand that people look at their cell phones from extremely near where as tablet is definitely, most of the time, a little bit above the knees when a individual is sitting. In short, distance matters. When you have a hard time reading it, improve the font size.

Optimization of Line Size

Optimizing the queue length is rather an important aspect. The reason is that a desktop possesses a bigger display screen and can adapt to around 75 characters within a line although this will prove detrimental to readability on extra small screen size. Although there are no hard and fast guidelines, but of course, the size of a set plays an important role in the visibility and readability in the content.
So , choose the length of the line appropriately for different devices and ensure that it does rights with the screen-size as well as the overall website design.


Do not undervalue this facet of typography. Evaluation different backgrounds and color contrasts before going live and make a decision on the one that looks best. When testing, you could realize that a thing that looks extremely nice on a desktop may not produce precisely the same effect the moment seen on a smartphone or possibly a tablet for the kids.

So , the rule of thumb is normally, experiment with several devices possible when it comes to Reactive Web Design and responsive typography. Buy or perhaps borrow, nevertheless make sure that the solution works with all display sizes and appears absolutely amazing.

Leave a Reply