You must have heard a whole lot about Reactive Web Design (RWD), as it is one of the talked about issues on the net nowadays.

Yet , most of the instances, grids and images, fluidity and adaptability grab every one of the attention and barely any kind of discussion within the typography.

Though it’s one of many essentials that demand importance but most designers somehow tend to disregard this element. In this jot down, my singular focus is certainly on reactive typography regarding the website design.
Content, even though the most vital ingredient of any webpage, blog, forum or directory, is its content and the way it really is presented. However the focus of designers is mostly on the site design. That’s where the problem comes up.

The adaptive web design previously takes care of this kind of aspect at some level, by which include some amount of responsive typography. Yet this cannot be named complete however it comes full of numerous typographic options. Nevertheless , before we go into the details, let us 1st understand what responsive typography is usually.

What is Receptive Typography?

Reactive typography shows that the text on the webpage is not only resizable depending upon the screen size from the device, yet is also improved in order to improve readability. Nowadays, we typically only apply desktops or laptops to locate internet and browse websites but as well make use of tablets and smart phones.

For quite long, the designers have already been solely concentrating on website design to make it handy to the several screen sizes. There has been almost or almost no effort designed to optimize or perhaps adapt the information and its presentation according to the display size. Receptive typography addresses this issue, presenting an opportunity to designers to experiment with the content also.

Basics of Receptive Typography

The concept of responsive typography works on 3 basic principles:

Resizable text
Optimization of lines length

Whenever you make any decision about the presentation of text, that obviously begins from the font type. No matter what type of font you are employing, but it is critical to make sure that the content can be quickly read. If you wish to keep it sensitive, the only options are Serif and Sans Serif. Serif is generally used for headings or perhaps titles, although Sans Serif is used throughout the content.
The logic is pretty simple. The Sans Serif font gives you more liberty to experiment with. Therefore , you can actually use this for the top chunk with the text. The Serif font, according to the designers, is quite serious, thus rendering it a perfect decision for headings.

Resizable Text

When selecting the font size pertaining to the text on your website, be sure to specify this in the stylesheet according to different display sizes. Yet how to decide the right font size is another dilemma. For this the rule of thumb is definitely experiment you.

Yes, pick the font size and review how it looks when you work with a computer’s desktop, a tablet and a smartphone. Keep in mind that people take a look at their mobile phones from extremely near where as tablet is usually, most of the time, a little bit above the knee when a customer is relaxing. In short, range matters. Should you have a hard time examining it, add to the font size.

Optimization of Line Span

Optimizing the queue length is rather an important aspect. The reason is that a desktop provides a bigger display screen and can accommodate around 75 characters within a line while this will establish detrimental to legibility on extra small screen-size. Although there will be no hard and fast guidelines, but of course, the length of a path plays a serious role inside the visibility and readability with the content.
Therefore , choose the length of the line consequently for different units and ensure so it does justice with the screen-size as well as the general website design.


Do not undervalue this area of typography. Check different backgrounds and color contrasts before going live and choose the one that appears best. When testing, you might realize that something that looks extremely nice on a desktop may not produce similar effect the moment seen on a smartphone or maybe a tablet for example.

So , the rule of thumb is definitely, experiment with several devices likely when it comes to Reactive Web Design and responsive typography. Buy or perhaps borrow, but make sure that your solution meets all screen sizes and looks absolutely amazing.