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

Yet , most of the situations, grids and pictures, fluidity and adaptability grab every one of the attention and barely any discussion around the typography.

Though it’s one of the essentials that demand importance but the majority of designers in some way tend to disregard this feature. In this article, my bottom focus is on reactive typography pertaining to the website design.
Content, although the most vital ingredient of any web-site, blog, community or submission site, is it is content plus the way it really is presented. Nevertheless the focus of designers is mostly on the site design. This is when the problem comes up.

The adaptive web design currently takes care of this kind of aspect to some extent, by which include some a higher level responsive typography. Yet this cannot be referred to as complete however it comes packed with numerous typographic options. However , before we go into the details, let us 1st understand what receptive 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 for the device, nevertheless is also improved in order to improve readability. Currently, we may only employ desktops or laptops to access internet and browse websites but as well make use of tablets and androids.

For quite long, the designers have been solely centering on website design in order to make it extremely versatile to the several screen sizes. There has been almost or almost no effort designed to optimize or perhaps adapt this content and its introduction according to the display size. Reactive typography address this issue, giving an opportunity to designers to experiment with this content also.

Basic Principles of Receptive Typography

The idea of responsive typography works on three basic principles:

Resizable text
Search engine optimization of set length

Whenever you make any decision about the presentation of text, that obviously starts off from the font type. No matter what type of font you are employing, but you will need to make sure that this great article can be conveniently read. If you need to keep it sensitive, the only selections are Serif and Sans Serif. Serif is generally utilized for headings or perhaps titles, while Sans Serif is used throughout the content.
The logic is fairly simple. The Sans Serif font will give you more freedom to experiment with. Therefore , you can actually use it for the major chunk for the text. The Serif font, according to the designers, is quite severe, thus which makes it a perfect choice for headings.

Resizable Textual content

When choosing the typeface size for the purpose of the text on your own website, ensure that you specify it in the stylesheet according to different display sizes. Nevertheless how to decide the best font size is another issue. For this the rule of thumb is certainly experiment on you.

Yes, select the font size and evaluate how i think when you work with a computer’s desktop, a tablet and a smartphone. Remember that people take a look at their cell phones from incredibly near where as tablet is usually, most of the time, a bit above the knees when a individual is seated. In short, distance matters. If you have a hard time examining it, enhance the font size.

Optimization of Line Duration

Optimizing the queue length is rather an important aspect. The reason is that a desktop incorporates a bigger screen and can support around seventy five characters within a line although this will confirm detrimental to legibility on extra small screen-size. Although there are no hard and fast guidelines, but of course, the size of a brand plays a serious role inside the visibility and readability for the content.
Therefore , choose the entire line accordingly for different products and ensure that it does rights with the screen-size as well as the total website design.


Do not underestimate this part of typography. Test out different backgrounds and color contrasts before going live and choose the one that appears best. Even though testing, you could realize that a thing that looks really nice on the desktop may not produce a similar effect the moment seen on the smartphone or a tablet for that matter.

So , the rule of thumb is definitely, experiment with as many devices likely when it comes to Reactive Web Design and responsive typography. Buy or borrow, but make sure that the solution will fit all screen sizes and appears absolutely amazing.