Three weeks ago I decided to write about Typography. The reaction to that post developed a series to change your perception about this subject. On this particular post we will see how to apply basic typographic principles to our Web designs.
Typographic knowledge separates the experienced designer from the novice. This expertise shows whether a designer knows how to work with typography, or not. Dealing with typographic details on the Web comes with a lot of challenges and restrictions. Let’s see some tips that will guide you when designing for the Web.
At the end of a paragraph and the beginning of another, you can either indent or insert a space between paragraphs. Don’t do both! It is redundant to indent and insert a space between paragraphs.
Not two spaces anymore
One or two spaces after a sentence? A long lasting debate in typography; and for printed material still a matter of argument. But on the Web, this practice is outdated, and it creates awkward breaks in the body text. The beginning of a sentence is already indicated by a period, a full space and a capital letter. Adding another space can interrupt the reading flow.
Almost all of us, type the ellipsis as three periods (…), but some fonts come equipped with their own characters that are slightly more spaced out. Some Style Manuals would say that the proper way of typing ellipsis is by separating the periods with spaces, this could be very disruptive to body text. In this case, your judgment is bets; choose the ellipsis that makes your text look consistent.
Ragged or Justified
Setting ragged right will lighten the page and decrease stiffness. This setting is generally considered easier to read because the eye can better distinguish one line from the next. Hyphenation should not be used with text that is flush left; this would defeat the whole point of a ragged right.
Justified text is spaced out so that each line is of the same length. Because all lines have to be set at the same length, some variation in letter spacing, and word spacing is done to lengthen or shorten the lines. This changes the texture of the body, making it less even. Avoiding justified text on the Web is generally a good idea.
In my last Typography Post we talked a bit about Sans Serif, in Web they are the “selected ones”. When it comes to laying out text on a screen, sans serif are almost always the best bet, especially if you choose a font like Verdana which was designed for display on computer screen. Serifed fonts have a higher chance of displaying poorly, becoming blurry and even pixelated. I know that it’s not possible to entirely avoid serifs, but for large blocks of text, using a font without serifs can offer an extra level of guarantee that visitors will be able to easily read a site’s text.
Typography is easily overlooked; it’s easy to write it off as a time-intensive activity with little return. But spending a couple minutes revising your text can transform your design in to a masterpiece.
These are not rules, but rather some guidelines to help improve your designs.
Are you paying attention to the typography in your designs? What guidelines you actually use when designing?