Why thinking typographically ruins your site?

Since there are no obligatory academic courses for our sector, one often approaches the web design with no graphic nor composition basis and with the same frequency changes course to web design starting from a training in traditional graphics.

Obviously in both cases there are advantages and disadvantages: if previously you didn’t study a grain of  graphics, without relying on an innate good taste, you have to learn how to harmonize colours and fonts, know how to position elements in a pleasant and  balanced way, keeping a rhythm leaving also empty spaces …and many other things, all to learn.

On the other hand, if you have always done in your life graphics for the press, you’ll have to deal, not a little thing, with the malleability of the “web media”: you’ll have to unlearn a few standards that you have until now considered as certainties.

In practice having a certain type of training or not having it, can lead the same to certain problems and make gross mistakes that would be better to understand and prevent from the start (instead of  finding remedies after), and that’s what we’re going to see now.

Malleability and  personalization

One of the most common errors when one approaches the web-design is the non understanding that every single person will see the website in a different way respect to another, by his will or not, whether he’s aware  of it or not.

If you have never designed a graphic layout  it will be easier to accept this reality; while if you have always worked for the press  you have already found yourself sooner or later in designing the image for a product/service/company, where on a variety of formats (visiting cards, leaflets, flyers, posters, playbills) you had to readapt the elements, creating a new composition that would fit the support, without losing the balance obtained in a bigger or smaller format: but on the web you have to accept the idea of a minor control.

iPhone is able to "fix"the site to improve the display, but the Aruba settings does not allow it.

Monitor resolution, operating system, browser, support (or device) are only a few of the things that affect the final visualization of a website; we need to consider the toolbars that automatically get installed with many programs (some users are unable or too distracted to avoid it) that reduce the visible space on the browser and the personal settings of  the O.S. for the font size.

Fixed Layout  (height of the boxes and font-size)

There are three types of layout: fixed, semi-liquid and liquid. Managing a liquid layout is certainly complicated, mostly if you’re a novice and without doubts a fixed layout is the easiest to create. The performances of the three may vary and for each project one of them may be better than the others.

However  generally, the terms “fixed”, “semi-liquid” and “liquid” refer to the ability of the layout to adapt itself to the width, as it should be obvious that the height is left “free” having the possibility to flow with the scroll-bar. It’s important, as in traditional graphics and especially in the composition of newspapers, that the most important articles are “above the fold”, in our case, in the visible part without scrolling. But it’s not possible (or better, recommended) to force such a thing through a box with a fixed height or excessively small fonts.

If you had to set the font size a poster, you probably calculated the dimension of this and the distance from which, it is generally seen; you’ve done readability tests and probably with a little bit of  practice have learned which is the ideal dimension of the font and so on.

I remember my grandfather reading his newspaper a with magnifying glass. Nowadays, on the web, the user has at his disposal many ways to modify the font size, of  a site as he likes, so it’s useless to set the size at 10px (pt don’t have sense) because it’s more “elegant”: if the user can’t read it and is a bit expert, he’ll increase it, otherwise (even worse) he’ll leave the site.

Tips and Tests to run 

I advise you to test the readability of your font on someone who doesn’t know the texts of your site, it will be always easier for you to read or even hint them (this advice is valid also for the contrast between the colors text /background).

Another test of vital importance (vital for your site!) is to vary the size (open the browser and press [ctrl] +[+], with Mac [⌘] + [+] to increase and [ctrl/⌘] +[-] to reduce) at least of 2 “zooms” to make sure that your layout remains standing.

Are you wondering what might happen? If you let that the height of each container to fit to its contents, nothing will happen (ergo: everything’s ok).

On the contrary you’ll assist to something that will seem like the end of the world.

As you can see (and try if you want), on the site of the Corriere della Sera, our test will miserably fail: the texts leak out from the div in which they’re enclosed, overlapping their borders and other texts becoming unreadable.

The possibility of increasing the font size was given just to help people to read better, to fix everything according to one’s needs, while in this way it’s obvious that what was supposed to be a facilitation turns out to be a hurdle race.

Moreover it prevents justified alignment: even if the text may seem perfectly nestled in its box, at the smallest zoom it can create horrible holes.

Conclusions: Prevent that the site collapses

To save yourself from this disaster you must avoid specifying a height in the CSS style of the elements or, if it’s really necessary, you should calculate the height considering the possibility of increasing the font, in this last case, however, you may not have an optimal result, leaving empty spaces at the end of the box.

You might think that for a graphic box (for example, a cartoon or a shading) it’s necessary to specify a height, but it’s not so: often with just a bit of knowledge of CSS and intuition to take out an excellent box with graphic effects worth respecting, simply by using the border propriety  and a background image well positioned. However in some case you may need the help of a second background image: a technique that is also used to simulate borders with rounded corners is to nest an element inside another so that you can assign to each of them a different background (or better, the same image but with a different positioning).

<div style="background:url('sfondo.png') top center no-repeat;">
    <div style="background:url('sfondo.png') bottom center no-repeat;">
    CONTENT
    </div>
</div>

Note: Both for the double background and for the rounded corners CSS3are coming to the rescue, but before they become standard it will take several years (people mention 2020) and at the moment several browsers  (rightly) don’t support them.

For what concerns the fonts, don’t even think about setting a text too small just because “it occupies little space” or “it looks better”. Make sure that it’s functional, therefore readable:
setting a slightly bigger font-size could prevent that someone resizes it ruining your layout.

I talked about the particular approach that generally certain types of people may have (with a background of traditional graphics or with no basis of web graphics), do you think that the problem is widespread even outside these cases? Or maybe you’re one of  the above categories that never commit these errors?

*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia