![](../gfx/borderleft.gif) |
![](../gfx/pixeltrans.gif)
introduction
![](../gfx/pixeltrans.gif) articles/lectures
![](../gfx/pixeltrans.gif)
web typography
style and design
functions of type
usability
interaction
composition
webstyles
conclusion
bibliography
links
![](../gfx/pixeltrans.gif) |
![](../gfx/linespacer.gif) |
![](../gfx/titlesubcompo.gif)
Composition is one of the most powerful means available to the typographer/designer. A layout can be a big influence on the clarity of the content and the way the different visual elements relate to each other. For instance, in the western world, people read and write from left to right and from top to bottom. The combination of composition and graphical elements can have an enormous influence on how information is perceived. When designers know how the eyes and brain interprets visual information, layout is not merely a visual attribute but an effective way to communicate. Composition is even more important on the Internet where different types and functions of typography need to be differentiated. Therefore the typographic grid alone is not enough to communicate clearly on the Web.
![](../gfx/pixeltrans.gif)
The Gestalt principles of connection3
These are descriptions of the way humans perceive information. Knowledge of these rules provides insight on how users/readers interpret designs. These principles are very simple and obvious; but more often than not they are implemented badly. A short explanation of the most important Gestalt principles:
![](../gfx/pixeltrans.gif)
1) Objects displayed bigger seem more important than smaller objects
2) Objects with the same colour, shape and size relate to each other
3) When encircled by a line, several object are perceived as related
4) Aligned objects relate to eachother
![](../gfx/pixeltrans.gif)
The visual relation between navigation and content needs to be clear. If a navigation does not work well, it could be that the navigation and layout inaccurately represents the site structure.
How is typography currently represented on the Web?
|
![](../gfx/pixeltrans.gif) |
![](imagerb.jpg) |
![](../gfx/pixelwit.gif) |