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

Yet , most of the intervals, grids and pictures, fluidity and adaptability grab each of the attention and barely any discussion over the typography.

Though it’s among the essentials that demand importance but the majority of designers in some way tend to disregard this feature. In this jot down, my single focus is usually on reactive typography in connection with the website design.
Content, although the most essential ingredient of any website, blog, forum or directory site, is it is content and the way it truly is presented. Nevertheless the focus of designers is mostly on the webpage design. That’s where the problem comes up.

The adaptable web design currently takes care of this aspect to some degree, by including some degree of responsive typography. Yet this kind of cannot be referred to as complete but it comes packed with numerous typographic options. Nevertheless , before we all go into the specifics, let us initially understand what responsive typography is usually.

What is Responsive Typography?

Reactive typography ensures that the text on the website is not only resizable depending upon the screen size of this device, nonetheless is also maximized in order to increase readability. Currently, we is not going to only work with desktops or perhaps laptops to gain access to internet and browse websites but also make use of tablets and iphones.

For quite long, the designers have been completely solely concentrating on website design to make it functional to the different screen sizes. There has been nearly or very little effort made to optimize or adapt the content and its web meeting according to the screen size. Responsive typography details this issue, giving an opportunity to designers to experiment with the content also.

Basic Principles of Reactive Typography

The idea of responsive typography works on three basic principles:

Resizable text
Marketing of path length

Whenever you help to make any decision about the presentation of text, this obviously begins from the font type. Whatever type of font you are using, but it’s important to make sure that this can be easily read. If you want to keep it very basic, the only options are Serif and Without Serif. Serif is generally employed for headings or perhaps titles, whereas Sans Serif is used for the rest of the content.
The logic is fairly simple. The Sans Serif font will give you more liberty to experiment with. Therefore , you can actually use that for the major chunk within the text. The Serif typeface, according to the designers, is quite serious, thus which makes it a perfect choice for headings.

Resizable Textual content

When determining the typeface size with regards to the text on your own website, make certain to specify this in the stylesheet according to different display screen sizes. But how to decide the correct font dimensions are another issue. For this the rule of thumb is usually experiment for you.

Yes, pick the font size and assess how it looks when you work on a computer system, a tablet and a smartphone. Understand that people look at their mobile phones from incredibly near where as tablet is definitely, most of the time, slightly above the leg when a user is sitting. In short, distance matters. In case you have a hard time reading it, raise the font size.

Optimization of Line Proportions

Optimizing the line length is rather an important aspect. The reason is that a desktop provides a bigger display screen and can hold around 75 characters within a line although this will verify detrimental to readability on extra small screen-size. Although there are no hard and fast rules, but of course, the size of a path plays a major role in the visibility and readability of your content.
Therefore , choose the length of the line consequently for different products and ensure that it does rights with the screen size as well as the overall website design.


Do not underestimate this aspect of typography. Test out different backgrounds and color clashes before going live and decide on the one that looks best. Whilst testing, you might realize that something which looks really nice over a desktop might not exactly produce the same effect when ever seen on a smartphone or a tablet as an example.

So , the rule of thumb is certainly, experiment with several devices feasible when it comes to Reactive Web Design and responsive typography. Buy or borrow, but make sure that your solution matches all display screen sizes and looks absolutely amazing.