Escrever texto para a web - HTML (7 regras) (EN)

Data de publicação: Dec 02, 2013 3:59:20 PM

Retirado de www.apaddedcell.com/7-simple-rules-for-formatting-text-on-the-web em 23Nov.2013

7 simple rules

Rule #1: Don’t use more than one font from the same family.

Two fonts from the same category have what is called a conflicting relationship. This basically means that they look a little odd when used in the same design. For example:

This rule goes double for decorative fonts, and triple for very dramatic decorative fonts such as the ones used below:

Rule #2: Don’t use Times New Roman, ever

In fact, as a beginner, you might want to avoid using serif fonts on the web altogether. As I mentioned earlier, serif fonts are best for reading on a printed page. On a web, they don’t usually look as good. Sometimes a font like Georgia or Garamond could work for your design, but Times New Roman (or Times) almost always looks bad.

Rule #3: Don’t overformat

Many beginners are tempted to use every formatting option available. When they want to make text stand out, they’ll use bold, italics, different fonts, sizes, and colours – sometimes all at once! This tends to result in a lot of visual clutter on the page. It’s hard to pick out the most important text because everything is styled to look like it’s important. The eye doesn’t know what to settle on because every piece of text is competing for attention.

To avoid this, choose one style for emphasis. Mark up your key text with <em> or <strong> tags. It's probably best to keep the default formatting for those elements, but you may choose to use CSS to style them a little differently.

Rules #4: That goes double for links

Once you learn a bit of CSS it may be tempting to apply all sorts of different formatting to your links. You can give them backgrounds and borders, and make them all change on mouseover! Isn't that a good thing? Well, no it's not. Links should stand out from the main text, but they should not be distracting. Applying too much formatting to the links may make them difficult to read, or distract the user from reading the rest of the text.

Links firstly need to be easily identified as links. When you remove the bottom underline you are taking a risk that people won't recognize them. At the same time, they need to blend in with the rest of the text. They shouldn't stand out so much that it's impossible for the reader to focus on other parts of the page. The formatting should also not interfere with the text itself – adding things like dashed borders or bright background colours can do that.

Rule #5: Don’t center text

Centered text sometimes works well in print but it rarely looks good on a screen. This is especially bad for paragraphs when they eye has to jump back and forth to read each line. This puts stress on the reader and makes it more difficult to read your text. For example:

Centering headlines might work occasionally but also tends to have an unprofessional look. It gives the impression that you weren’t sure how else to format your text, so you used the most obvious option. This is the sort of thing you might have done on your first typed homework assignment – not on a website.

Rule #6: Make sure text is easy to read

This rule relates to all of the above points: centering, overformatting, and using the wrong font categories can combine to make it difficult for a visitor to read the text on your page. Another common problem is using text that doesn’t contrast enough with the background or text that is just plain too small.

Make sure that your text is easy for people to read. And that doesn't just mean that they can make out the letters and understand what the word says. It should be easy and comfortable to read your text, not difficult and straining to the eyes. Nobody wants to read text that gives them a headache!

Rule #7: Don’t use <font> tags!

Unfortunately, there are still many HTML tutorials on the web that were written many years ago. Since then, <font> tags have been replaced with Cascading Stylesheets, known as CSS or stylesheets. CSS will allow you to keep all of the font formatting for your site in one central location. Instead of wrapping font tags around every piece of text, you’ll just make a few simple declarations in your CSS file and viola! Attractive fonts for your site that are consistent and easy to maintain. To learn more about CSS, visit the HTML Dog.

Summary

There are many things you need to consider when formatting text for your website. The best thing to do when starting out is to keep things as simple as possible. Use a plain sans serif for body text, use the default <strong> and <em> tags for emphasis, and use your CSS to make the headers a little bit bigger than body text. If your formatting is clean and simple, it will be easy for people to read your text – which is exactly what you want them to do!

References:

• Text font readability study

• Wikipedia article on Serif

• Colour contrast accessibility checker

  • Sample stylesheet with basic text formatting: sans serif, serif with sans serif headers