Fonts, Böxli and Printtagging
Web designers and print designers live in different worlds. Yet they both have a lot to learn from each other. Op-ed by Oliver Reichenstein, information architect in Tokyo.
Small fonts are quite popular on the Internet. That's surprising, because web pages are actually there to be read. It's even more surprising when you know that the font size that the web browser specifies (16 pixels) would be wonderfully readable in itself. It looks large when held next to a printed text. But if you compare the font sizes in perspective, the web text matches the print font in reading distance.
The reason web designers use small fonts is both historical and technical: screen fonts were developed at a time when screens were much smaller than they are today. And so they developed correspondingly small fonts. The screen also has a lower resolution than paper.
The task of the designer: solving problems
This gives you very little design freedom, unless you make the reading font smaller. The smaller the font, the easier the task for the designer, the prettier the page. But the designer's job is to solve problems, not win beauty awards.
Even with the Böxli, designers often make it too easy for themselves. If you compare an average website with a professional print page, you can see: Web designers use many more frames and Böxli than print designers.
One example is BBC.com. There, everything - the lead story, the weather, and every teaser - is contained in a Böxli. It is exhausting for the eye to jump from Böxli to Böxli. The fact that the Böxli have Web 2.0 round corners doesn't make things any better.
What web designers can learn from graphic designers
The fact that Böxlerei is just as bad a habit as the small font becomes apparent when one reads up on the typographic rule for lines, which is very obvious even to a non-designer:
1. bring the elements that belong together in terms of content visually close together.
Set elements that do not belong together spatially apart from each other.
3. things that do not belong together but must be brought close together for space reasons are separated by lines so that they can be kept apart.
In other words, you use lines only when there is not enough white space. White space is not a matter of taste, but an element of order. If you draw lines not only to the left and right, but also above and below, and connect these lines, i.e. if you make a box, then this means that what is in the box is something really different from what is happening around the box. Websites that are still and still using Böxli are communicating: There are a lot of things together here that don't really belong together. In other words: this page is a whorehouse.
Why are Böxli nevertheless used so excessively? Böxli are used because it is easier to make a frame around everything than to think of a clear structure. So they are often an indication of a "puffy" information design.
What graphic designers can learn from web designers
The examples Böxli and small font show nicely how web designers can learn from graphic designers. I think graphic designers should also learn from web designers. Because even more astonishing than the small fonts and the Böxli are the often inscrutable information architecture and the unfriendly lead deserts that today's newspapers and magazines still present to us.
The solution to the problem: color-coding keywords. A text with colored keywords can be scanned by the reader in five seconds. It may not look so pretty, but the true beauty of the text is not an aesthetic one; it lies in its readability. If all the texts in this issue were interspersed with keywords, then you could scan every article and quickly check to see if there was anything interesting there.
in it.
In addition, one would then also know which keywords to search for in order to find the text again online and to comment on it. Because keywords have a simple equivalent online: The web designer calls it tagging. Editors would also be delighted with print tags, because color-coded keywords next to the headline, title, lead, and subtitles are sharp hooks to draw the reader into the text. Wouldn't they?
The reason web designers use small fonts is both historical and technical: screen fonts were developed at a time when screens were much smaller than they are today. And so they developed correspondingly small fonts. The screen also has a lower resolution than paper.
The task of the designer: solving problems
This gives you very little design freedom, unless you make the reading font smaller. The smaller the font, the easier the task for the designer, the prettier the page. But the designer's job is to solve problems, not win beauty awards.
Even with the Böxli, designers often make it too easy for themselves. If you compare an average website with a professional print page, you can see: Web designers use many more frames and Böxli than print designers.
One example is BBC.com. There, everything - the lead story, the weather, and every teaser - is contained in a Böxli. It is exhausting for the eye to jump from Böxli to Böxli. The fact that the Böxli have Web 2.0 round corners doesn't make things any better.
What web designers can learn from graphic designers
The fact that Böxlerei is just as bad a habit as the small font becomes apparent when one reads up on the typographic rule for lines, which is very obvious even to a non-designer:
1. bring the elements that belong together in terms of content visually close together.
Set elements that do not belong together spatially apart from each other.
3. things that do not belong together but must be brought close together for space reasons are separated by lines so that they can be kept apart.
In other words, you use lines only when there is not enough white space. White space is not a matter of taste, but an element of order. If you draw lines not only to the left and right, but also above and below, and connect these lines, i.e. if you make a box, then this means that what is in the box is something really different from what is happening around the box. Websites that are still and still using Böxli are communicating: There are a lot of things together here that don't really belong together. In other words: this page is a whorehouse.
Why are Böxli nevertheless used so excessively? Böxli are used because it is easier to make a frame around everything than to think of a clear structure. So they are often an indication of a "puffy" information design.
What graphic designers can learn from web designers
The examples Böxli and small font show nicely how web designers can learn from graphic designers. I think graphic designers should also learn from web designers. Because even more astonishing than the small fonts and the Böxli are the often inscrutable information architecture and the unfriendly lead deserts that today's newspapers and magazines still present to us.
The solution to the problem: color-coding keywords. A text with colored keywords can be scanned by the reader in five seconds. It may not look so pretty, but the true beauty of the text is not an aesthetic one; it lies in its readability. If all the texts in this issue were interspersed with keywords, then you could scan every article and quickly check to see if there was anything interesting there.
in it.
In addition, one would then also know which keywords to search for in order to find the text again online and to comment on it. Because keywords have a simple equivalent online: The web designer calls it tagging. Editors would also be delighted with print tags, because color-coded keywords next to the headline, title, lead, and subtitles are sharp hooks to draw the reader into the text. Wouldn't they?
