They used Comic Sans.

Of course the name was blacked out and nobody could possibly know which student had committed the unforgivable act – but they knew. They laughed with the rest of the class, but inside they felt all-encompassing shame of poor font choice.

Popular opinion holds that Comic Sans is the worst typeface to ever exist. Narrowly edging Papyrus for that dubious distinction, Comic Sans is a force of nature. It can inspire so much raw hatred, allowing it to unite people around a common enemy. Folks that can’t agree on which direction the sun rises find common ground in their overwhelming disgust for Vincent Connare’s simple, comic book-inspired font.

But like almost anything universally despised, there are a few brave souls who have decided to stand in defense of the maligned font. The people of the Comic Sans Project state “we are the Comic Sans defenders. We fear no fonts and we will make the whole world Comic Sans. Because Helvetica is sooo 2011.”

The tumblr is simple. To spread Comic Sans to everything we know and love by replacing classic logos with the font. So far, they’ve managed about 10 revamps – as they’ve only been active for about a week. Here are a few of my favorites:

They say that they have received a lot of submissions, and are working on setting up a submission system soon.

I’m afraid what Hitler might have to say about the blog, however:

The people at the Comic Sans Project aren’t the first to take up the cause of the beleaguered font. This amazing animation was created based on a McSweeney’s monologue:

Why so much hatred for Comic Sans? As one YouTuber said in a response to that very question: “Because it’s shit.”

If all this Comic Sans has you feeling a little gross, might I suggest watching Helvetica as the mind’s equivalent of a long, hot shower.

[Via The Daily What]

Perhaps “unleashing” captures the moment better than the word “introduction.”

Facetiousness aside, these additional fonts obviously give users multiple options; and in a cyberworld overrun with Verdana and Arial text, a little variety goes a long way…

Just ask Dan Gilbert.

Besides the number of fonts introduced, Blogger boasts all of the new styles are web-safe, going as far to call them “Web Fonts.”  With the 35 new fonts, Blogger’s total is now up to 77, all of which are listed here. 

Incidentally, Comic Sans is not one of the available fonts, so the next time Dan Gilbert wants to write a fiery dismissive of LeBron James (image H/t), he should probably look into Blogger’s service.

The new fonts are available for all Blogger users, and the text alterations can be applied to an  entire blog.  Members are encouraged to experiment in the composition WYSIWYG before applying any blog-wide changes.

"This is just the beginning of fonts in Google Docs," says software engineer Jeremie Lenfant-Engelmann. "We added six new fonts today and we’re already testing our next batch. You’ll see many more new fonts over the next few months. And because Google Docs uses web fonts, you’ll never need to install a new font: when you load your document, the latest set of fonts will always be there, ready to use."

The six new fonts include: Droid Serif, Droid Sans, Calibri, Cambria, Consolas and Corsiva. "Right now our font support covers most Latin and Western European character sets. However, we’ll be adding web fonts for other languages (like Hebrew and Greek) soon.," says Lenfant-Engelmann.

Google is doing a lot of new things with Google Docs. These include new collaboration features and spreadsheet printing. Google announced this week that 3 Million Businesses Have "Gone Google".

"Now, whenever you visit the font family page of any of the fonts, you will see a link saying ‘Preview this font’ that will load your font selection into the font previewer," says Marc Tobias Kunisch with the Google Font API Team. "Here you can edit the text, change its size and line height, and add decorations and spacing among other things. You can even apply text shadow to your text."

The preview will then generate code that you can stick in your style sheet.

"If you want to see the font sample without any distractions from the font previewer controls, you can do that as well simply by clicking ‘Toggle controls’ in the upper right corner," notes Kunisch. "This will show you a nice clean example of what the font would look like in your design."

The Font API (in beta) lets users add web fonts to any web page.

"In the early days of email, messages were simple text meant to be read on a terminal. But with the growth of the web came the advent of HTML email, and overnight people began expressing themselves through bold and italics, colors and images, and whatever else their creativity inspired," Google says. "If you like to use a specific text style for your messages, you’ve had to change the font every time you’re about to start typing out an email."

The purpose of this new Labs feature is to change that. If you turn the feature on, you can easily control how your message looks and alter that setting when you need to.

"If you live and breathe code, now you can set your default text style to a monospace font. If your life is purple, your email can be, too," the company adds. "But remember: whatever you see is what your recipients will see, so be nice to them and try not to clog the intertubes with ginormous bold italicized red script."

Just like with any other Gmail Labs feature, you will need to go to the Labs tab in your settings and activate it. If you’ve not messed around with Gmail’s Labs features, you will likely find some other useful features to activate as well.

Related Articles:

> Gmail Aims to Save Embarrassment Yet Again

> Gmail Gets a New Label Feature

> Google Adds Google Docs Previews to Gmail

"In the same way that you regularly try out changes to your AdSense ads to increase your earnings, we’re also constantly looking for new ways to help you earn more," explains Arlene Lee of Google’s Inside AdSense Team. "We’ve been analyzing the performance of the three available font faces (Arial, Verdana, and Times New Roman), and have found that each font performs best in different ad formats due to factors like character width."

The changes will only apply to ad units that have "AdSense Default" selected as the font face, and are in languages that have Latin-based characters like: 

- Croatian
- Czech
- Danish
- Dutch
- English (US and UK)
- Finnish
- French
- German
- Hungarian
- Indonesian
- Italian
- Norwegian
- Polish
- Portuguese
- Romanian
- Slovak
- Spanish
- Swedish
- Turkish

AdSense ad units are mostly set to Arial as the default, but a few are in  the Verdana font. The new defaults Google is launching include the following:

Arial: 728×90, 336×280, 120×600, 120×240

Verdana: 300×250, 160×600, 468×60, 250×250, 234×60, 125×125, 180×150

Times New Roman: 200×200

While Google is changing the defaults, the company still encourages users to experiment with fonts on their own. There is no reason why other fonts might work better for your own ads.

You weren’t expecting that last part were you?

I wasn’t either. But this post on effective news article design proves it.

Newspapers have had trouble transitioning from print to the Web. They’re used to doing things differently.

Me, too. I still write difficult, dense copy. See. I still like serif fonts better, too. I also have a pen collection and a wall map fetish. Because I’m old school sometimes.

Well, most of the time.

Laura Ruel and Nora Paul (link above) interviewed people from Nielsen/Norman group about readability and user satisfaction and comprehension.

They said users spent more time reading wordy content, but remembered 34 percent less than when they read really tight copy.

That’s because of the way people read on the Internet. It’s the same reason designers on the Internet use sans serif fonts –so you can read faster.

"If a user is comfortable," said Nielsen researcher Tara Coyne, "not hindered by clutter and superfluous words, and can scan the main points, he will get the summary of the article quickly and easily."

Superfluous is superfluous, but it’s not her fault, she’s an academic type. It’s also otiose, but we’ll just call it ‘excessive,’ because it’s easier.

Ruel and Paul said people don’t really look at pictures, either, unless they’re pictures of real people and not models. People like pictures that give them information. They skip pictures that are just there to be pretty.

Also, women might be telling the truth when they say size doesn’t matter. All the men in the eye-tracking study fixated on George Brett’s…strike zone. But women didn’t. Not at all.

So, add this to the other things we know about Web copy and design. Here’s a short list to help you remember, bulleted and subtitled like it’s supposed to be.

20 Things To Remember For Good Web Copy

1.    Tight writing. That doesn’t mean bad or easy writing.

2.    Copy of about 600-800 words is better for SEO and catching the long tail of search.

3.    Title – Subject – Support, in that order, like subject, verb, object.

4.    Titles should be snappy and informative – clickable, but clear.

5.    Leads (first sentence or paragraph) should get to the point. Tell the reader what the article’s about first thing.

6.    No fancy, wordy intros where it’s not clear what you’re talking about. 

7.    Information beats fluff every time. Pretty is for books and newspapers (and only sometimes).

8.    Information does not beat style every time. Style keeps people awake.

9.    Sans serif fonts are easier and faster to read on computer screens.

10.    White space is awesome – even better than big, pretty pictures.

11.    Content should be scannable.

12.    Think in bullets and subtitles.

13.    People like lists.

14.    Pictures should be specific and informative, not generic, decorative and ad-like.

15.    Photos should be relevant to content.

16.    People in pictures should look friendly and approachable (and have their whole head).

17.    Photos should be full body if possible (so guys can check out packages and stuff).

18.    Spell stuff right. It makes you look smarter.

19.    Grammar IS important. Unless you’re not really a professional.

20.    Online press releases should be even tighter than Web copy.

Currently pursuing a Master of Fine Arts in Writing degree, Jason Lee Miller received his bachelor’s degree in Communication, emphasizing in script writing for mass media. Jason is also certified in print journalism by the Kentucky Press Association.
 

As with color the fonts you choose can reveal a great deal about your company and your site and the image you want to convey to your audience. Fonts are also an important accessibility consideration for your website.

One of the most important things to understand about fonts is that not everyone has the same ones installed on their computer. The only way you can absolutely be sure your visitors will see the font you choose is to make your text an image. There are many reasons though, why this isn’t a good idea and you should limit the amount of images you use to display text. It’s ok for your logo. It’s very bad for your main copy.

How Many Font Families Should I Use?

The web is about flexibility and your choice in which families of fonts you use should take advantage of this flexibility. Ideally you should provide options for which font your visitors will see. I like to offer an ideal font, followed by a common font, and then offer a generic font to capture all those who don’t have either of the first two fonts installed. If you were coding your font famil in CSS it might look something like:

font-family: "ideal, common, generic";
font-family: "franklin gothic, verdana, sans-serif"

Browsers will display the first one they encounter on the list that’s installed, so if a visitor does have your ideal font they will see it. If not they may still have the common font you specified, and if all else fails they should be able to see your generic option. It’s also ok to use a different list of fonts for different elements in your design, but try to limit it.

It can become very distracting to see every heading in a different font, your navigation links in another, and your body copy in yet another font. Best practice would be to keep the total number of fonts on the page to three.

Serif? What’s A Serif?

Serifs are the small decorations you’ll find at the end of letters. Serif fonts are generally easier to read in print, but the situation is just the opposite on a computer monitor. At smaller size serif fonts can become unreadable and a sans-serif font is preferred. The font you are seeing now is a serif font, but to give you a comparison here is a serf font against a sans-serif font.

• This is Times New Roman a common serif font
• This is Verdana a common sans-serif font

You should generally stick to a sans-serif font for your main body copy. It will be much easier for your visitors to read. You can use other font types for page headings or in your logo, but the bulk of your text should really use a sans-serif font. Other types of font you may encounter are decorative and script fonts. Both can be used, but as with serif fonts they are best left to only some page elements and the text in those elements should be larger enough to make the font readable.

Is My Font Too Small?

Perhaps the biggest accessibility issue with font is the size. Pesonanlly I’m most comfortable reading text at 14px, but that may not be the case with everyone. Your best bet is to use a relative measurement like em’ when specifying the size of your font.

Using a relative measurement will allow your visitors to more easily adjust the size to whatever works best for them. If you think 12px is a great size then use the equivalent em size. I can increase the font to see it at my preferred 14px (0.9em) or similar if I choose.

As we get older we typically have a harder time reading small text. Know your audience and if your audience is aging you probably want to use a larger default size. You may like that 12px font, but if your audience can’t read anything below 16px (1.0em) make sure your default size is 16px or above. But remember to use the relative measurement instead of px.

Relative measurements can play havoc with your design, if you’re not careful. You will need to code your site to account for the possibility of your font size being displayed at sizes other than the default you set. Most of the time this isn’t too difficult to deal with, but it may be important for your font to remain the same size for your layout.

Your navigation might be a good example where using a fixed size might work better for your design. I will sometimes use absolute measurements for the font size of my navigation, but remember if you do to set it at a size that’s larger enough for people to read. If it’s too small, your visitors may never find your other pages.

Contrast, I Need Contrast

Have you ever visited a site where the color of the text was so close to the color of the background behind it that you couldn’t read the words no matter what size of font family was being used? I know I have. It’s an example of poor contrast.

You want to use as much contrast as possible between the color of your text and the color of the background. Black text on a white background will be the easiest to read, followed by white text on a balck background. You can use other color combinations, but provide as much contrast as you can.

Remember too that just because you can read the text not everyone else will. Not everyone can discern your light blue text on your medium blue background. Make it as easy as possible for your visitors. No matter how great it looks if no one can read your text they’re going to leave pretty fast and they probably won’t be coming back.

Even when the colors contrast well the choice still may not be idea. Red text will usually stand out well against a green background. Unless of course you’re one of the many people who suffer from red-green color blindness. In that case the two colors will likely look more alike than you’d like.

Summary And Resources

Remeber that as with many other aspects of your design flexibilty is important to help make your site more accessible to a variety of people. Keep in mind that not everyone has the same fonts installed and provide options for them. Know which types of fonts are easier to read and know too that people prefer different sizes. Provide as much contrast as you can, but remember that contrast or not there are still some combinations that will prove to be difficult for some people.

Here are additional resources about fonts and accessibility:

• Website Type and Colour for the Visually Impaired
• Fonts and how they affect accessibility
• Perception of fonts: personality and traits of fonts
• A Comparison of Two Computer Fonts: Serif versus Ornate Sans Serif
• A comparison of popular online fonts: which type and size is best?

Related posts:

• How to gain a competitive advantage with an accessible website
• Integrating web design, SEO, usability and accessibility in design process
• Providing value to build a business

Tag:

Bookmark WebProNews:

Steven Bradley is a web designer and search engine optimization
specialist. Known to many in the webmaster/seo community by the username
vangogh, he is the author of TheVanBlog, which focuses on how to build
and optimize websites and market them online.

That’s news to me, too. I like long, artfully crafted sentences (not that I can write them). I like well-placed 25-cent words.

I even like serif fonts. But serifs, big words and long sentences are for fuddy-duddies and books. This is the Web. Fuddy-duddies should take note.

What’s the first word that comes to your mind? Use that one. How would tell a long story to an old friend who showed up next to you at the stop light? You know, before the light turns green. Tell it that way first on your webpage. Tell them more if they want to know, but give the basics first.

Usability expert Jakob Nielsen says “speak the user’s language.” He says the Web-writer’s first duty is to write to be found.

He also said:

People really like bullets, too.

Sources:

How people read on the Web.

Using old words for findability.

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

You’ve no doubt noticed the font of this article is lacking in the tail department (no junk in the trunk they say). That’s because the general consensus on the Web is that sans-serif fonts are better for reading from computer screens.

As it takes about 25 percent longer to read from a screen than it does from paper, san-serif fonts, like Arial, Helvitica, and Verdana, reduce the drag. No tails make it faster and easier to read. The back lighted and pixilated monitor isn’t so great at handling artsy little details.

The government knows the wham-bam-thank-you-ma’am personality of the sans-serif font (which, in my opinion, makes it deserve the vulgar “font” label). Road signs use it for quick message delivery. Newspapers too, for eye-grabbing and quickly processed headlines.

But notice that beneath the neatly efficient headline, the article itself has a healthy collection of happy little tails from Times New Roman or Georgia fontification (don’t look that up, it’s what we call a neologism).

The philosophy behind this is that the serif fonts guide the reader into an understanding of the piece as a whole. Words are not to be objectified by breaking them down into soldiered rows of individual letters. They are meant to be digested holistically, and serifs are the connectors that slow the reader down just long enough for greater comprehension.

Studies show that reading comprehension is greater when serif fonts are used. However, studies with children may be more indicative of the truth of the matter: children in the early reading stages showed no benefit either way. People are better at reading what they are used to reading.

As a writer, I’m snooty about the subject. I want you to feel the words, the tone, the heart of it-and the tails provide that. As a Web designer, though, you may (and should) disagree. This is a matter of optimizing content for the pixilated universe. To reward you for making it this far, here’s a few good rules for font use online and off.

A Fonting Guide To Web Design

Use sans-serif fonts for webpages. They are cleaner, faster, and less fatiguing. This is also important because of the very short amount of time you have to make an impression on new visitors. Think in terms of road signs to get them to STOP. Vistors only need one-twentieth of a second to form an impression.

What applies to fonts doesn’t apply to margins (white space). Though pages with smaller margins read faster than pages without, the disorder the lack of margins causes is stressful for the reader. In this situation, clean outweighs speed. Besides, speed takes away from comprehension.

Not all sans-serif fonts are created equal. While one study shows that the font Impact can be viewed as assertive, rigid, rude, sad, unattractive, and coarse, another says that people generally prefer Verdana overall.

Offline, It’s Georgia On My Mind

While Times New Roman is the standard, people seem to love Georgia. One study crowned the Georgia font as the most attractive, but Phil Renaud’s informal review of essay grades shows that the font may have a greater impact than you think.

Renaud believes the Georgia font earned better marks for him than TNR, and especially better marks than for papers printed in Trebuchet. The moral of his story is the same as the moral of ours: use san-serif online, serif for print.

On his list of other untested hypotheses, Renaud believes “Myspace users are twice as likely to be arrested for embarassing things than the general population.”

Tag: |

Drag this to your Bookmarks.

Add to DiggThis Yahoo My Web