Useful Tips to Improve Your Web Typography Skills

Today type is one of the most used elements of the web. That is why it plays a very important role in the process of web site creation and is worth of a certain attention. The design and the readability of your site is closely connected with good web typography practice. A more scalable, readable site means grateful visitors that will return, buy products, leave comments, and share the site with others. It is not just fonts and font size, but one more step to the success, of course, if you know and use the main principles of web typography. So, typography truly powers the web and we will try to power typography, implementing the recommendations of the experts that I offer for your consideration.

Using the Grid

The structure of a website is of a big importance because of its ability to concentrate the attention of the visitors, so it would be of a great use if you simplify your design decisions, give proportion and order to your content by making use of a grid.

Space Balance

Spacing is a key element in a content readability. It is space between web site's elements that determines the informative speed, simplifying or complicating the process of perception. And it's not just about your text - it is about the space that surrounds it. Too little space makes text hard to read, but so does too much. You should find the balance between the elements that will help to precept them one after another, increasing your text message readability and thus making it more important and understandable.

Leading

Leading, or line height, can make your text readable or not: too close together, and it's too hard to distinguish between the lines, too far apart and it is difficult to pick up on the next line. A good rule of thumb is that your line height should be 1.2 times the size of your type - 16px type should have a line height of around 19.2.

Measure

Leading is not the only factor that can increase your readability. The length of your line, or the so called measure, is also of a great importance. Experts say that your optimal measure sits between 50 and 60 characters per line.

Typographic scale

Set a typographic scale that will determine the sizes you are working with. The most common scale used in web design uses points at 14px, 16px, 18px, 21px, 24px, 36px, and 48px. You should also remember that the gaps will increase simultaneously with the size.

Alignment for type

Left aligned and unjustified will be an ideal alignment for web type, because it is just impossible to control individual letters and words. As for justified type - it is not the best choice, because of the rivers that are created in the text. In case you want to justify your text, you should rejig it until all the rivers will disappear or to use Hyphenator.js, a particularly impressive bit of Javascript that actually hyphenates copy on the fly.

Size

Now let's think about the size of your text that should be readable, but, in the same time, it should be not too big. The text is recommended to be set between 12 and 16 pixels, as for headings and menus - here variations are possible. And, of course, it should be kept in mind that today users may be accessing websites on iPhones and other hand held devices, so text must be legible across a range of screen sizes.

Number of fonts

If you want to make a web site that will look stylish and elegant, don't use more than two font faces. Too many font sizes, colors, or treatments on a page or in a paragraph will create a feeling of something chaotic and uncoordinated, instead of emphasising your message you will concentrate readers' attention on the fonts that will compete with each other.

Some interesting techniques

Starting the topic of fonts and their usage, I would like to recommend you several techniques that may be of a great need during your work. They can help you to create special nice effects. They are the following:

Drop Characters - a low line height and a bottom border, as a result some characters will drop below the line (such as the lowercase g). It looks rather interesting.

Break some rules
And if you want to be original and creative you should remember that rules can be easily broken in order to rich this effect. Designers should be aware of the general principles of typography, and be bold enough to experiment and contradict them if it is necessary for innovative and beautiful web pages creation.

Font color

Colors can make our life more attractive and interesting, but as for font color - you should remember that for large chunks of text it's best to keep to the traditional combination of dark type on a light page. Otherwise it can be difficult for reading and for the perception of your information, making it just impossible to concentrate on it. You can use colored text to emphasize words or sentences and, of course, for your headers. Pay your attention also to how well the design elements contrast with each other - they should be readable first of all.

Punctuation

It is so easy and so effective - hanging punctuation. It will help you to simplify the perception of your content and will help to single out the most important words and phrases. Hanging punctuation is the method of pulling glyphs like opening quote marks out of the vertical flow of the copy.

And some more recommendations regarding punctuation:

Usage of straight quotation marks is not very effective. Try to compare : "These quotation marks" and “These quotation marks”. The difference is quite clear, the second marks are not only more stylish, but they guide your eyes into and out of the quotation, singling out this part of the text from the rest content.

Coming across two consecutive hyphens (--) your reader will try to make sense of them being back-to-back and loosing the idea of the sentence. In order to prevent this you can just use an En Dash or an Em Dash.
An En Dash (a dash the length of a capital N: –) is used for:

Ranges of values
Relationships and connections
Compound adjectives

You can make an En Dash with this in your HTML: –
An Em Dash (a dash the length of a capital M: —) is used to indicate a temporary shift in thought, whether in the middle or end of a sentence.
Make an Em Dash with this in your HTML: —

Trying to create some special speech effects such as interruptions, for example, we use three periods (...), but three periods (...) are too far apart to immediately appear to be an interruption. That is why it would be better to use an ellipsis. Use … in your HTML, which appears like this: … and will be more suitable.