Typography for Beginners

May 15th 2010 | Designing with Wix

Designing a website inevitably means working with texts. Now, we’ve already posted some basic guidelines for writing online content, but what about the actual appearance of text on the site? That’s where typography comes in. Don’t worry, it’s not a disease. Typography is the expertise of arranging type – the words, the letters, the symbols and even the spaces between them. It’s one of the most important aspects of graphic and web design, and people who specialize in it are known as typography artists.

Typography for Beginners

Using our ready-made text models, you can easily avoid many dilemmas that typography artists confront every day. Still, knowing the basics can help you leverage your use of texts. Since no one is born with the instinctive knowledge of arranging type, we decided to give you Wix designers a short introduction to typography.

The first thing you need to determine when thinking about the typography of your website is what exactly is the purpose of the text. Whether the text is meant to be funny, informative or awareness raising affects your choice of arrangement. Whatever your specific purpose may be, all texts have a shared purpose: to be readable! Your site’s typography should serve a specific purpose without neglecting the general one.
The next step would be to consider the macro-typography of your site. In practical terms, macro typography means deciding where on the site the text is located, how big should the text boxes be, what structure do they have (vertical, horizontal, square, round, etc.) and what is the relationship between the text and the items surrounding it (images, videos, buttons).

Now it’s time to zoom in on the micro-typography, which deals with the actual size of the letters, the spacing between lines or between words, capitalization and letter manipulation (bold, italic, underscored). Using Wix’ website builder, you can decide yourself how to play with these parameters. In the screen shot below, you see the text editing tool. Notice how you can choose font, size, color and alignment. On the bottom left, there are two buttons for spacing. The extreme left one is for line spacing and the one next to it is for word spacing.

Wix Editor - text editing toolFor some great example of using typography in web design, check out the following websites:

misprintedtype




Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>