Responsive design is a great way to ensure that websites fit any screen size – computer, tablet or mobile phone. Responsive design is the gold standard of web design today. Yet, there seems to be very little effort towards making typography responsive too. While typography remains responsive on a responsive website, they are not ‘fluid’.
What we mean by this is, typography does not automatically change its size according to the screen size. Web developers need to specify dimensions and this is quite unnecessary. Fluid typography resizes itself automatically no matter what the device’s screen width is. It is intuitive, practical and far more effective than responsive techniques.
In responsive typography, type changes only at the breakpoints which are set. Fluid typography on the other hand readjusts itself smoothly. This helps in increasing readability of websites, no matter where they are visited from. After all, it is increasingly becoming clear that typography is far more important than design, as we want people to read text, and not just be impressed by the great design.
[php snippet=1]
Starting with fluid typography
To build a website with fluid typography, you will have to tinker with viewport units. An easy way to begin with fluid typography is to understand what viewports are, and then begin to work with them. A viewport is a polygonal viewing region and its dimension differs in percentages. You will also need to control your viewport units by setting a minimum and a maximum size for fonts.
The rate of scale can be similarly controlled too, and this is another crucial part of building a fluid typography-based web page. The next step is to maintain an ideal line length. Next, a modular scale ensures that everything looks ‘correct’. Robert Bringhurst’s ‘The Elements of Typographic Style’ as a resource guide to learn more about fluid typography is highly recommended.
Different modular sizes need to be set for different screen sizes, and this means you need to specify how large your headlines need to be than the text under them, and other such criteria. You will also have to maintain a proportional space and work with constraints. Michael Riethmuller’s article is a great guide to whoever wants to begin with fluid typography.
Focusing on readability
The more we see changes in the way people consume content, the quicker we will have to make changes to the way we build websites. These days, people tend to focus on longform reading, and content that is compelling. This requires web designers to build sites with exceptional readability factors. To bring in readability, you will have to use fluid typography along with responsive design. This helps you to enhance readability across devices, and provide a uniform and consistent experience, within the context of any device chosen.
You will probably need to read a couple of books on fluid type before you get to work, and the above mentioned resources are great.
