Clearance and white space: designing texts
Although it may at first seem a little odd, when you stop and think about it, it is apparent that white space in design terms can play as important a role as (if not a more important role than) the actual content. This is the case both in the print and online contexts. The fact that page construction online is very flexible means certain particularities obtain here that you may need to know about.
A typical error made by the inexperienced designer is to try to fill each page equally and as completely as possible with material. The result is frequently simply uninteresting. However, the other problem is that the viewer then has no orientation aids to help them comprehend and take in what you really wish to communicate: your message. White space (i.e. the “gaps” between the various layout elements) not only provides for the necessary contrast but can also be used to indicate to your audience which components belong together and which do not.
In this situation, text represents a special case. While it always consists of letters, words and lines, it is perceived as a flat expanse in terms of the layout. In order to create these expanses, it is necessary to ensure that there is sufficient clearance around the text relative to font size and line spacing. To put it briefly; the larger the point size and the space between lines, the larger is the distance required between the various layout elements.
And there is another factor that you need to consider. If the text lines are too long, it becomes difficult to follow them and reading becomes arduous. It is here that the main challenge lies when it comes to designing for the internet. It is always advisable to think about what would happen if the user has a large screen and opens the browser window to its full size. Would the intended relationships between elements be retained? Would your texts still be legible and your lines still be not too long?
In the case of printed text, the latter problem is frequently overcome by means of the use of a multi-column layout. In the online context, however, this approach is not generally suitable for text. While it is technically possible with modern browsers to extend the text flow over several columns, the fact that window size cannot be predicted in advance means that this concept is doomed to fail.
To avoid the generation of excessively long lines of text, the usual strategy employed is to work with fixed width layouts or to restrict line length using the CSS max-width property. A more elegant solution is provided by so-called responsive layouts that use the CSS @media property to match layout to browser window. So, for example, a two-column layout may be generated for a narrow window and a four-column page layout for a wider window.
A final tip: don’t be worried by white space within your designs. White space not only ensures that the resultant image looks expressive, unconstrained and professional but can also be used to some extent to offset the differences with regard to browser window sizes.
In this situation, text represents a special case. While it always consists of letters, words and lines, it is perceived as a flat expanse in terms of the layout. In order to create these expanses, it is necessary to ensure that there is sufficient clearance around the text relative to font size and line spacing. To put it briefly; the larger the point size and the space between lines, the larger is the distance required between the various layout elements.And there is another factor that you need to consider. If the text lines are too long, it becomes difficult to follow them and reading becomes arduous. It is here that the main challenge lies when it comes to designing for the internet. It is always advisable to think about what would happen if the user has a large screen and opens the browser window to its full size. Would the intended relationships between elements be retained? Would your texts still be legible and your lines still be not too long?
In the case of printed text, the latter problem is frequently overcome by means of the use of a multi-column layout. In the online context, however, this approach is not generally suitable for text. While it is technically possible with modern browsers to extend the text flow over several columns, the fact that window size cannot be predicted in advance means that this concept is doomed to fail.
To avoid the generation of excessively long lines of text, the usual strategy employed is to work with fixed width layouts or to restrict line length using the CSS max-width property. A more elegant solution is provided by so-called responsive layouts that use the CSS @media property to match layout to browser window. So, for example, a two-column layout may be generated for a narrow window and a four-column page layout for a wider window.
A final tip: don’t be worried by white space within your designs. White space not only ensures that the resultant image looks expressive, unconstrained and professional but can also be used to some extent to offset the differences with regard to browser window sizes.