Approach heard a lot about Reactive Web Design (RWD), as it is one of the talked about matters on the net nowadays.

However , most of the instances, grids and images, fluidity and adaptability grab all the attention and there is barely any discussion for the typography.

Although it’s among the essentials that demand importance but many designers somehow tend to dismiss this element. In this write up, my single focus is usually on responsive typography pertaining to the website design.
Content, even though the most essential ingredient of any site, blog, discussion board or service, is its content plus the way it is presented. But the focus of designers is mostly on the website design. This is how the problem comes up.

The adaptable web design already takes care of this aspect at some level, by including some standard of responsive typography. Yet this kind of cannot be referred to as complete however it comes packed with numerous typographic options. Nevertheless , before we go into the details, let us first of all understand what receptive typography is certainly.

What is Responsive Typography?

Responsive typography signifies that the text on the website is not only resizable depending upon the screen size in the device, nonetheless is also improved in order to improve readability. Today, we do only work with desktops or perhaps laptops to view internet and browse websites but as well make use of tablets and androids.

For quite long, the designers had been solely focusing on website design to make it alterable to the various screen sizes. There has been almost or hardly any effort made to optimize or adapt a few possibilities and its display according to the screen size. Responsive typography address this issue, giving an opportunity to designers to experiment with this great article also.

Basic Principles of Responsive Typography

The concept of responsive typography works on 3 basic principles:

Resizable text
Marketing of brand length

Whenever you make any decision about the presentation of text, that obviously starts off from the typeface type. Regardless of what type of font you are using, but you have to make sure that this can be easily read. If you need to keep it sensitive, the only selections are Serif and Sans Serif. Serif is generally employed for headings or titles, although Sans Serif is used for the rest of the content.
The logic is fairly simple. The Sans Serif font provides you with more liberty to experiment with. Therefore , you can actually use it for difficulties chunk belonging to the text. The Serif typeface, according to the designers, is quite serious, thus making it a perfect choice for headings.

Resizable Textual content

When determining the font size with respect to the text on your own website, be sure you specify it in the stylesheet according to different display screen sizes. But how to decide the correct font dimensions are another question. For this the rule of thumb is definitely experiment for you.

Yes, opt for the font size and evaluate how it looks when you work on a computer system, a tablet and a smartphone. Keep in mind that people check out their mobile phones from extremely near where as tablet is normally, most of the time, a little bit above the knees when a end user is sitting down. In short, range matters. When you have a hard time reading it, boost the font size.

Optimization of Line Proportions

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


Do not undervalue this area of typography. Test out different backgrounds and color clashes before going live and decide on the one that looks best. While testing, you may realize that something which looks extremely nice on a desktop might not produce the same effect the moment seen over a smartphone or a tablet either.

So , the rule of thumb is certainly, experiment with as many devices conceivable when it comes to Receptive Web Design and responsive typography. Buy or borrow, nonetheless make sure that your solution matches all screen sizes and looks absolutely amazing.

Leave a Reply