Typograhic tips for the web

 

 

 

 

 

 

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.

Paragraphs

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.

Ellipses

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.

Sans Serif

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?

 

 

6 replies
  1. Brian W
    Brian W says:

    I can only suppose the debate about double spaces in typography came from the conventional practice of office typists using the old monospaced mechanical typewriters, and was carried over unnecessarily into the typing of proportionally spaced text with word-processors. It has never been accepted practice in typesetting and tends to be viewed by professional typographers as the mark of an amateur or badly trained designer. The use of double spaces creates undesirable “holes” in the overall page colour and is slightly disruptive to the continuity of reading. One of the first things I would do when preparing client-supplied text for the page is to search and replace all instances of double spaces.

    The opposite applies to the ellipsis. An ellipsis in typeset material has always been spaced as with word spaces. The comment that it is disruptive is not really applicable, because the intention of an ellipsis is to insert a break in the flow of the text to draw attention to an omission. Therefore “disrupting” the flow in this case is entirely intentional.

    • Daphne Lenti
      Daphne Lenti says:

      Thanks for your comment Brian!
      You are completely right about the double spacing, it’s been carried along time and creates a gap in the flow of the copy. For the ellipsis, in my opinion can be a little bit disrupting to have a whole space in between them, but as the post reads it can be applied differently according to the design.

  2. Tom Strike
    Tom Strike says:

    Both of you have very good points.

    When it comes to using ellipses, I find that the proportionally spaced fonts may create periods with very thin character widths. To make the ellipse look normal, it may require spaces between the dots. When using a mono-spaced font, no spaces are needed. Bottom line, you want to make it look like it belongs with the text even though you are trying to create a break in the context.

  3. Jenor
    Jenor says:

    Thanks Daphne for having this kind of article.

    Typography has been the oddest part of my web developing career. I have one client who uses tilde as an ellipses, it feels awkward for me to see a tilde being used as an omission in a sentence. I’m no major in literary or anything like that but this tilde really bothers me, anyway that’s what they wanted for their web site.

    Just to clear my thoughts in this, is there a substitute for ellipses (…) or can we use other symbol for this?

    • Daphne Lenti
      Daphne Lenti says:

      Thank you for your comment Jenor!
      I know that it can be hard to see all this for Web Designers if you don’t come from a Graphic Design background, but if you follow a couple of basic details you will be fine.
      You have a very interesting point and definitely awkward situation with your client. I never heard of a substitute for ellipses, so I turn my research radar to get some more information. I just found a little bit of information on Wikipedia that refers to the em dash (—) as a possible substitute for ellipses, it can be used instead of an ellipsis to indicate aposiopesis, the rhetorical device by which a sentence is stopped short not because of interruption but because the speaker is too emotional to continue, such as Darth Vader’s line “I sense something; a presence I’ve not felt since—” in Star Wars Episode IV: A New Hope.[20]
      I love Darth, but if you ask me I still prefer my ellipsis if they are used in the right place. They make a better statement.
      Please keep posted because the next couple Mondays we will be going more in depth in the subject of Typography.

Comments are closed.