Ideal measures for Responsive Web Design With the popularity of responsive web design in recent years the designers are more concerned with “ideal measure” for text lines & fonts. The popularity of this concept has given rise to such advice as increasing the font size for large screens & reducing the font size for small screens. Following the norms of “ideal measure” gives you an excellent reading experience but it’s just a matter of good typography & nothing more. A second rule is also implemented where the designers maintain a comfortable font size. Purpose of online content What’s the main function of online content? The one line answer is to serve the purpose of customers, probable customers or viewers. They read it to find the exact information they want, to find new ideas. The popular pattern of reading online text Nielsen Norman Group had conducted an interesting survey in the year 2006. It measured the eye tracking pattern of readers through the heat mapping technique & the study revealed that while reading people focus most at red font, next in line was yellow font & then came blue font text. From the image below, it is clear that the red & yellow colors form 3 different patterns of the alphabet ‘F’. It is not unusual as generally people read in 3 different ways.
Image source: http://bit.ly/1EXHxHS
Also while reading, people jump from 1 section to another on purpose. They take a note of the beginning of a paragraph & scan through it for information that they require. It may be like they would take note of the first few words of a paragraph only while scanning. Below is the image which had measured the eye movement of a reader through heat mapping while they scan a piece of information at Google search. A reader reads first 2 search results more slowly & minutely. After that he jumps from section to section searching for the exact search term.
Image source: http://bit.ly/1t0M2Kh
At last when people find something interesting & also fulfilling their purpose, they read in a more engaged manner. Below is the image showing the eye movement of a reader who reads with concentration. We can see that the pattern is more continuous. As we can see that there is more red, meaning they spent more time in reading. As they gradually lost interest in reading they focus more at the left hand side of the text.
Image source: http://bit.ly/1t72Xty
The Ideal Measure is 45 to 75 Characters Maintaining a good measure is only 1 rule for setting a text that encourages a reader to read it because reading a lengthy line may cause fatigue while too short a line often breaks up the words & phrases. So we try to maintain an optimum line length. We often consider 65 characters to be the perfect measure of a text line. Derived from this is the ideal range of a text line that all designers should conform with is 45 to 75 characters (which includes spaces
& punctuations). You can extend this range from 45 to 85 characters easily. Nowadays more designers are focusing upon line length to determine line breaks in a responsive structure. Relationship between small devices & font size Sometimes there is a clash between the “ideal measure” & comfortable font size regarding the planning of the font size for hand held devices. If for maintaining the “ideal measure” a reader has to zoom in & pinch the font size then the whole purpose of responsive web design becomes futile. Ultimately a reader keeps his hand held device closer to his eyes while reading. So in this case you can maintain a comfortable font size rather than going with the “ideal measure”. Relationship between large devices & font size Majority of users still use desktops or laptops. As too small font sizes pose problem, too large font sizes may also pose problem. Large font size takes up more horizontal space. This interferes with the regular horizontal flow of reading that users are habituated with. Also an enlarged textual size reduces the pace of reading. Ultimately it becomes cumbersome to read horizontally & the reader would skip portions from vertically down the left hand side of the text. By increasing the font size for large devices we can preserve the “ideal measure”. But in practice, if we retain a comfortable font size while simply narrowing down the width of the column, it would be better for us. Conclusion Fixing the technical issues related with hand held devices can be tricky. We can pinpoint some important steps but ultimately the work experience of a designer & his/her effort to apply new techniques can bring in success. So regularly try to evolve & experiment. That’s the key to success for a website designer.