Web Typography - Four Golden Tips

    The basics of web typography came to us from the distant 1991, still from the notorious Tim Berners-Lee :)

    If you look back, in the terrible times of the reign of IE 1.0, web typography (I'm not talking about web design) was in its infancy. At the moment, the situation is different. We have enough funds to correctly format text on a web page.

    The essence of web typography is not just choosing the right font and the ability to distinguish the style of one font from another.


    Fig. 1: Recent experiments have shown that 90% of trained monkeys correctly distinguish the Helvetica font.

    We'll talk about web typography as a recipe with four main components. If you have ever tried to make soufflé, you probably could feel how important the recipe is.

    Contrast


    Pale pink text on a pale blue background may be suitable for your T-shirt, but it will be terrible to read, believe me. The text should be readable; always make sure that the text is in sufficient contrast with the background.

    If, however, you cannot determine the degree of contrast, then a very simple tip. Take a screenshot of your page and in any graphic editor translate it to gray-scale. Everything will immediately become clear. As Robert Bringhurst said, typography exists to emphasize content .



    Perhaps this is a matter of taste, but voluminous text is more difficult to read against a contrasting background (example in the picture, white text on a black (or dark) background).

    How often do you see books with this design?

    Such a contrast can be used only for a small amount of text, but nevertheless, reading such a text is in any case difficult.

    The size


    Recently, very small font sizes have come into fashion. Especially, it is fashionable on flash sites. To be honest, I myself really liked small fonts, like this , but over time, I began to understand that this was a mockery of the user.

    Many designers explain their love this way, such as: " put on glasses, I made fonts for normal readers ", or " this reflects my minimalist approach to design ."



    Do not make the font size of the main content below 10-12px.
    It is clear that everything looks fine on your 65-inch plasma monitor , but I doubt that everything is just as good on a regular 15-19-inch monitor.

    Hierarchy


    Manipulating fonts is the best way to highlight text content. Highlighting with color and border, of course, can help, but the correct placement of the text size can much better help the reader in determining the main content of the page.

    And this means that your reader, who is in a hurry, can always quickly emphasize the main thing for himself.



    Hierarchy can be achieved in other ways. We just touched the font size.
    You can also vary the styles, for example, make everything in capital letters or use italics in the subtitles. Mixing Serif and sans serif can also give a good result.

    Space


    Let your text breathe. Do not be afraid to leave empty spaces, they will only help to focus the reader on the text and since the text is the most important component, let it be seen.

    And do not forget about the line spacing, the distance should be at least 140% of the font size (CSS property line-height).

    The best font designers fight for micro-space in their fonts. They spend many hours looking for the perfect balance between the black color of the letters and the white background surrounding them.

    Also, one should not lose sight of the space between blocks of text.
    Remember, these are not rules, these are just tips. Try to follow them - CONTRAST , SIZE , HIERARCHY and SPACE- and you yourself will see that the quality of web-typography in your projects will begin to grow up, as one of the Gordon Ramsay soufflé.

    And about the monkeys - it was a joke;)

    Original: ilovetypography.com/2008/02/28/a-guide-to-web-typography
    Free translation (with its comments and additions): SHAGGYSMILE

    Also popular now: