The blog post explains how to enhance your website’s readability & legibility by following these simple <a href="http://www.vijaywebsolutions.com" target="_blank">website development guidelines.
The typeface and airiness of the text affects the website’s readability. The text on the website should be enough large that it is comfortable for users to read. For small text, large text and too many fonts on a single page make text difficult to read. Limit the number of fonts on the site and always use relative units such as “em or percent”, so it is possible to influence the size of the text.
Good fonts that are linear such as Verdana, Tahoma, Trebuchet and especially Georgia is designed for reading on screen, but not all users have these installed on their computers. It is most likely that they have Arial and Verdana. Therefore, try to provide fonts with several options like Verdana, for example, Geneva, and Arial or Helvetica as a fall-back.
Times New Roman is specially made for narrow newspaper columns and therefore are less appropriate in other contexts. It is very important that alternatives are always concluded with a general type of font (“serif” or “sans-serif”) as in the example below. Always keep in mind that sometimes it may be necessary to deviate from the organization’s web graphic profile as web text and other requirements for readability.
Set in the style sheet, which font to use for different items.
font-family: Verdana, Arial, Helvetica, sans-serif;
Do not experiment with several different fonts and font sizes for the same type of text elements (body text, for example).
Graphical Highlighting such as italics and bold should be used sparingly within the text. Bold type is used mainly to highlight key words in a text. Italic text can be just like the printed text used to mark emphasis. Otherwise, it should be used very sparingly in the texts to be read on screen. If you want to give the titles of journals, then similar graphic marking quotes are more preferred.
Write menu items and titles in uppercase lowercase, i.e., with initial capital letters. Words written in capital letters is harder to recognize and thus impair readability. If left menus or vertical menus are used, left align the text. This makes it easier to skim the menu items as your eyes can wander along the menu’s left edge.
The default setting in browsers display text with spacing of 120 percent of font size. The wider the columns used for body text, the greater spacing will be. It gets easier for your eyes to find the beginning of the next line.
Spacing may need to be increased to at least 150 percent in the text paragraphs and the spacing between paragraphs is at least 1.5 times larger than the line spacing. These adjustment is usually done with CSS.
The distance between the different points in bullet should be larger than the line spacing. Then it becomes easier for the visitors to see the difference in what is a new point and what is a paragraph that spans multiple lines. This adjustment is also done with CSS.
Always let the body text to be left-aligned. The text should be straight and smooth left edge and a ragged right edge as it facilitates the reading. Avoid hyphenation, except for very long expression that gives uninspiring line breaks.
Column Width / Row Length
Many users need to be able to increase text size. Larger text size offers wider layout and thus a longer line lengths. As long as row lengths impair readability, it is important to create a design that adapts to the font size that the visitor has selected in their browser.
Avoid getting a horizontal scroll bar on the side. Instead make a layout where the text lines are adapted to the window size. To avoid long lines when wide browser window is used, it is appropriate to set a maximum column width. The slit width should be no longer than 80 characters. The maximum column width that corresponds to a particular unit of measure in the style sheet varies depending on layout, fonts and line spacing.
Typographic experience shows that the optimal line length is 45-55 strikes (including spaces), it basically applies regardless of the font and font size. One can extend down to 35 and up to 65 characters per line, but not anymore.
In conclusion, make sure that both the layout and typography on the sides is airy, it promotes readability and the visitor’s ability to assimilate the information. There are several means to achieve this – airiness in spacing, line length and page margins, choice of font and font size, paragraphing and headings, use of images, etc…
Font size is often determined in the layout and graphic profile, however please try the website with other common fonts and verify that legibility is good even for the visitors who access these instead. Also, try to enlarge the text and see that legibility is still good for those who enlarges text using the browser functionality. The text should be enlarged to 200% without affecting the content or functionality.
It is important to point out that the horizontal scroll bar should be avoided and the text to be enlarged to 200% without destroying the layout.
Following these web development guidelines, you would be able to enhance your website’s readability and legibility.