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

Yet , most of the situations, grids and pictures, fluidity and flexibility grab all the attention and there is barely any kind of discussion around the typography.

Even though it’s one of many essentials that demand importance but most designers somehow tend to ignore this element. In this article, my single focus is normally on responsive typography with regards to the website style.
Content, although the most essential ingredient of any web-site, blog, online community or directory site, is the content plus the way it can be presented. However the focus of designers is mostly on the website design. This is when the problem comes up.

The adaptive web design currently takes care of this kind of aspect to some degree, by which includes some a higher level responsive typography. Yet this cannot be called complete nonetheless it comes packed with numerous typographic options. Yet , before we go into the information, let us 1st understand what receptive typography is.

What is Reactive Typography?

Reactive typography means that the text on the webpage is not only resizable depending upon the screen size within the device, nonetheless is also optimized in order to increase readability. Currently, we tend only employ desktops or perhaps laptops to view internet and browse websites but also make use of tablets and androids.

For quite long, the designers have been completely solely focusing on website design in order to make it adjustable to the different screen sizes. There has been practically or hardly any effort built to optimize or adapt the content and its demonstration according to the screen size. Responsive typography includes this issue, presenting an opportunity to designers to experiment with this great article also.

Basics of Responsive Typography

The concept of responsive typography works on three basic principles:

Resizable text
Marketing of set length

Whenever you help to make any decision about the presentation of text, it obviously starts off from the font type. No matter what type of typeface you are utilizing, but it is critical to make sure that this content can be quickly read. If you wish to keep it sensitive, the only alternatives are Serif and Without Serif. Serif is generally utilized for headings or perhaps titles, although Sans Serif is used throughout the content.
The logic is rather simple. The Sans Serif font will give you more liberty to experiment with. Therefore , you can actually use this for the major chunk belonging to the text. The Serif typeface, according to the designers, is quite critical, thus rendering it a perfect decision for titles.

Resizable Text

When selecting the typeface size intended for the text on your website, make sure you specify this in the stylesheet according to different display sizes. Nonetheless how to decide the proper font dimensions are another dilemma. For this the rule of thumb is usually experiment with you.

Yes, opt for the font size and analyze how it appears to be when you work on a personal pc, a tablet and a smartphone. Keep in mind that people take a look at their cell phones from very near while tablet is normally, most of the time, somewhat above the knee when a user is seated. In short, length matters. In case you have a hard time browsing it, increase the font size.

Optimization of Line Period

Optimizing the line length is pretty an important factor. The reason is that a desktop has a bigger display and can hold around 75 characters in a line although this will establish detrimental to legibility on extra small screen-size. Although there are not any hard and fast guidelines, but of course, the length of a lines plays a serious role in the visibility and readability belonging to the content.
Therefore , choose the length of the line appropriately for different equipment and ensure which it does rights with the screen-size as well as the overall website design.


Do not underestimate this part of typography. Test different backgrounds and color contrasts before going live and select the one that looks best. When testing, you might realize that something that looks extremely nice on the desktop may not produce the same effect the moment seen over a smartphone or a tablet for the kids.

So , the rule of thumb can be, experiment with numerous devices possible when it comes to Reactive Web Design and responsive typography. Buy or perhaps borrow, although make sure that your solution satisfies all display sizes and appears absolutely amazing.