You’ll want heard a lot about Responsive Web Design (RWD), as it is probably the most talked about subject areas on the net nowadays.

Nevertheless , most of the intervals, grids and pictures, fluidity and adaptability grab all of the attention and there is barely any kind of discussion on the typography.

Though it’s one of many essentials that demand importance but many designers somehow tend to disregard this aspect. In this write up, my sole focus is definitely on reactive typography in relation to the website style.
Content, although the most essential ingredient of any web-site, blog, forum or website directory, is their content and the way it really is presented. However the focus of designers is mostly on the site design. This is where the problem develops.

The adaptable web design previously takes care of this aspect to some degree, by including some standard of responsive typography. Yet this cannot be known as complete but it comes packed with numerous typographic options. However , before we go into the particulars, let us primary understand what reactive typography is definitely.

What is Receptive Typography?

Reactive typography shows that the text on the site is not only resizable depending upon the screen size for the device, nevertheless is also improved in order to boost readability. At present, we typically only use desktops or perhaps laptops to view internet and browse websites but as well make use of tablets and iphones.

For quite long, the designers have been completely solely concentrating on website design in order to make it handy to the numerous screen sizes. There has been almost or very little effort made to optimize or adapt the information and its web meeting according to the display size. Reactive typography contact information this issue, presenting an opportunity to designers to experiment with a few possibilities also.

Basic Principles of Reactive Typography

The concept of responsive typography works on three basic principles:

Resizable text
Marketing of sections length

Whenever you help to make any decision about the presentation of text, this obviously starts from the font type. No matter what type of typeface you are employing, but you need to make sure that this article can be very easily read. If you wish to keep it very basic, the only selections are Serif and Sans Serif. Serif is generally employed for headings or 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 this for the major chunk in the text. The Serif font, according to the designers, is quite significant, thus making it a perfect decision for headings.

Resizable Textual content

When choosing the typeface size meant for the text on your own website, you should definitely specify it in the stylesheet according to different display screen sizes. Although how to decide the best font size is another concern. For this the rule of thumb is certainly experiment for you.

Yes, pick the font size and assess how it looks when you work with a desktop, a tablet and a smartphone. Understand that people check out their mobile phones from extremely near where as tablet is certainly, most of the time, a bit above the knees when a customer is seated. In short, distance matters. Assuming you have a hard time examining it, improve the font size.

Optimization of Line Distance

Optimizing the line length is quite an important aspect. The reason is that a desktop has a bigger display and can accommodate around 75 characters within a line whereas this will prove detrimental to readability on extra small screen size. Although there will be no hard and fast rules, but of course, the size of a range plays a major role in the visibility and readability of your content.
Therefore , choose the length of the line appropriately for different units and ensure that it does proper rights with the screen-size as well as the overall website design.


Do not take too lightly this aspect of typography. Test out different backgrounds and color contrasts before going live and decide on the one that looks best. Whilst testing, you could realize that something that looks extremely nice over a desktop may well not produce a similar effect when seen over a smartphone or possibly a tablet for that matter.

So , the rule of thumb can be, experiment with several devices feasible when it comes to Receptive Web Design and responsive typography. Buy or perhaps borrow, although make sure that your solution will fit all display screen sizes and looks absolutely amazing.