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

Yet , most of the days, grids and images, fluidity and adaptability grab every one of the attention and there is barely any kind of discussion at the typography.

Even though it’s among the essentials that demand importance but many designers somehow tend to dismiss this aspect. In this jot down, my only focus is usually on responsive typography in terms of the website design and style.
Content, even though the most essential ingredient of any site, blog, online community or directory site, is the content and the way it can be presented. Nevertheless the focus of designers is mostly on the website design. That’s where the problem occurs.

The adaptable web design already takes care of this aspect to some degree, by which include some level of responsive typography. Yet this kind of cannot be named complete nonetheless it comes packed with numerous typographic options. However , before we all go into the details, let us initially understand what receptive typography is certainly.

What is Responsive Typography?

Reactive typography implies that the text on the website is not only resizable depending upon the screen size of your device, nevertheless is also improved in order to increase readability. Nowadays, we tend only work with desktops or perhaps laptops to view internet and browse websites but as well make use of tablets and iphones.

For quite long, the designers had been solely concentrating on website design produce it functional to the various screen sizes. There has been practically or not much effort built to optimize or perhaps adapt this article and its demo according to the display size. Reactive typography details this issue, presenting an opportunity to designers to experiment with a few possibilities also.

Basics of Responsive Typography

The concept of responsive typography works on 3 basic principles:

Resizable text
Marketing of line length

Whenever you make any decision about the presentation of text, it obviously starts from the typeface type. No matter what type of typeface you are employing, but you have to make sure that this content can be conveniently read. If you want to keep it very basic, the only alternatives are Serif and Sans Serif. Serif is generally used for headings or perhaps titles, while Sans Serif is used for the remainder of the content.
The logic is very simple. The Sans Serif font will give you more liberty to experiment with. Therefore , you can actually use that for the major chunk of your text. The Serif typeface, according to the designers, is quite significant, thus turning it into a perfect choice for titles.

Resizable Textual content

When selecting the font size meant for the text in your website, make sure to specify it in the stylesheet according to different display screen sizes. But how to decide the correct font size is another issue. For this the rule of thumb can be experiment upon you.

Yes, find the font size and examine how it looks when you work with a personal pc, a tablet and a smartphone. Remember that people take a look at their cellular phones from incredibly near where as tablet is definitely, most of the time, slightly above the knee when a customer is sitting. In short, distance matters. In case you have a hard time reading it, improve the font size.

Optimization of Line Proportions

Optimizing the line length is pretty an important element. The reason is that a desktop provides a bigger display and can accommodate around seventy five characters in a line while this will show detrimental to readability on extra small screen size. Although there will be no hard and fast rules, but of course, the size of a collection plays a significant role inside the visibility and readability in the content.
Therefore , choose the entire line consequently for different devices and ensure it does rights with the screen-size as well as the overall website design.


Do not undervalue this facet of typography. Check different backgrounds and color contrasts before going live and determine the one that appears best. When testing, you could realize that a thing that looks incredibly nice on the desktop may not produce the same effect when ever seen on a smartphone or a tablet either.

So , the rule of thumb is usually, experiment with several devices conceivable when it comes to Receptive Web Design and responsive typography. Buy or borrow, although make sure that the solution matches all display sizes and looks absolutely amazing.