how many finalist do you have?
anyway, nice one Steven D.

Entities are IMO better idea, for example: ©

The first really cool article to come from the competition. Granted a lot of it is well known by now but it’s a good round up. Bravo

Good tips for anyone to follow.

Guilty of a few of these- namely 2(ellipses), 7(underlining), and 9(ignoring accent characters).

Great article.

It’s strange: the article mentions to border links instead underlining them, but Smashing Magazine doesn’t keep with it.

entities and mac equivalents. or is the idea of opt+g too hard for ©? :P

The last 2 items are saying what you should do, not what you shouldn’t (like the other 8). It really confuses the flow of the article.

Great tips. And to help out the lazy among us :) here are a few CSS classes:

.lowercase {
text-transform: lowercase;
}
.underline {
border-bottom: 1px solid #000;
}
.uppercase {
text-transform: uppercase;
}


I’m hoping to see more like this. Great job.

Ellipses… are immediately after the word, 3 periods and followed by a space before the next word. Not……. and just random periods.

Whereas em dashes have no spacing on either side.

Awesome tips.its very useful.thanks a lot.im learning this one

what a aload of common sense. This is webdesigner level 1 stuff.

I don’t want to give up the double space after the period. I don’t care if it’s wrong. Just can’t do it.

it sucks a lil’ bit

I think the underlining issue is too slight to be really called a “sin.” More of a small nicety that could make your copy look marginally better. Personally, I’m just happy when people bother to underline links at all these days.

Although I agree on the readability issues of #7 (underlining), using border-bottom instead text-decoration:underline for links requires a bit of care: that extra border pixel may be just the thing to push objects down or around around and wreck a layout. Reducing the padding-bottom to compensate might make up for it, but not always, and it might be impractical if you’ve set up an em-based typographic baseline.

WORST. ARTICLE. EVER.

-7 is a good tip
-Better than 5 would be to just type out copyright
-Text transform properties might seem like a good idea at the time, but what happens when you copy and paste content and then suddenly your content isn’t in caps anymore? think about it. its just a bad idea. Same goes for special characters that don’t copy.
-If anyone ever handed me website content with normal quotes (not “dumb” quotes) then I would either make them change the content to dumb quotes or dump them as a client, or maybe just disembowel them.

Isn’t character mapping only good on PCs?

Where I come from we use

©

and the likes.

I also think dumb quotes are good, because it works cross browser, while


"

will work in some browsers, but not in others.

Also, does photoshop fonts really matter, we’re dealing with web typography, your fonts don’t matter.

hmm, my code blocks didn’t work

Oh my, even though I know of most of these points, I don’t stick to them all the time. I feel so ashamed… what a terrible, terrible inconsiderate web designer I am… :o

See if I care… Especially regarding 2. and 3. This is so pointless. Fanatic typography designers forcing the world to comply.

Please do not

Great article … except for #7.

Sorry. Missed a closing bracket.

Please do not use underlining for emphasis on the web. People assume underlined words are links, and get frustrated when nothing happens after clicking on them.

Regarding ellipses, the Canadian Press Style Guide says to use three spaced periods. That’s good enough for me. Emphasis on “spaced” though.

Oh, and they’re “primes” not “dumb quotes”.

Re #10. Em dashes are spaceless only in the US.

Some of these are more of annoyances than sins. I agree with Karl about 2 and 3. In 6, you should never underline your text unless it is a link. That’s the biggest sin of all!

In his 2007 article on hyperlinks (http://www.thinkvitamin.com/features/design/dont-be-the-weakest-link) Paul Boag argues against the use of bottom border instead of underlines (#7). Many of his points have since lost their edge (mainly because of new browser versions), but I think that some of the arguments are still sound.

Forgot to mention, numbers 9 and 10 aren’t consistent with the rest of the list. The descriptions suggest that you should follow them, and not that they are sins!

Ummm. . .

If these are the “Top Ten Web Typography Sins,” then why don’t your solutions involve using HTML Character Entities instead of Windows ALT+ characters?

No web designer in his/her right mind would dare use ALT+ characters in their HTML. Print out a HTML Character Entity reference sheet and keep it handy.

Excellent post!
Even if I’m French and we do not use exactly the same rules, you’re so right.

Joffrey,
Link [www.geekandhype.com]

I enjoyed the article, but I disagree with the point about the makeshift copyright not cutting it in court. Since around 1989, works are automatically copyrighted, without the need for a notice. It is effectively irrelevant from a legal standpoint whether or not you use a makeshift copyright symbol, because the copyright statement only serves to notify others of the copyright. This provides protection from the “innocent infringement” defense in court, and the makeshift symbol can serve just as well as the real symbol in that regard.
Link [www.copyright.cornell.edu]

I’m figting this owful sins for a long time. Thanks for support. :)

Kim,

Either “dumb quote” or “prime” is acceptable, depending on context. When used as an indication of measure, yes, it’s a prime mark, but when used in markup, they’re dumb quotes. Valid criticism, though, I should have pointed out the distinction.

Y’know, after seeing the reactions the other entries have gotten, I actually told my girlfriend this morning how happy I was that I wasn’t a finalist; at least my writing wouldn’t be ripped to shreds on the most popular web design blog on the planet. Then it turns out they just aren’t notifying finalists… here I thought I’d dodged a bullet. ;)

Actually, - is not a minus. Minus (−) is as bit wider and has the same width as the + sign and all digits (though it can be different in some fonts).

Good rules to follow. Maybe it’s just me but if you do not already know these rules then you are probably not a very good designer.

I would have like to have seen some sort of image representing the overall theme of your article and headline. Maybe something with a devil image or the like.

No.1 should be use UTF and never quote Windows ALT+ characters when talking about the web.

Obviously the author never worked on a site outside of the USA.

So using underline is OK for emphasis but makes hypertext links harder to read?
Can you explain this to me? =]

Though those classes will save you the trouble of rewriting the whole title, you’ll still have to go through all your pages and switch the class if you ever want to change your design. You should instead have a class of “title” and have that text-transformed. that way, you’ll only have to change one thing in your CSS as opposed to the HTML on #unknown number# of pages.

This is a horrible article. Never, never, never use alt characters in HTML or the Mac equivalents. This mistake essentially ruins the whole article, because since you can’t do that, it’s almost always way too much work to put in curly quotes or real ellipses because you have to use the HTML entity. Some software will automatically convert straight quotes (etc.) to their proper versions, and that’s great. But if you don’t have software for that, it’s not worth it.

Also, primes are a different thing than straight (or “dumb”) quotes. It’s a completely different character.

The tip about not underlining links is moronic. Underlining looks the way it does on purpose, and the Photoshopped picture here has an extra white stroke around it to make it look much worse than it actually does.

It’s preferable to use real italics if you have them, but Photoshop’s fake italics will, if anything, work way better on the web than in print. (Notably, you can’t save to a PDF in PS with fake italics intact.)

Bad, bad, bad, bad article. Even though there are some truths in it, it’s sprinkled with so much bad advice that it’s ruined and would hopelessly confuse someone who didn’t know better.

@Steven D.

It isn’t that your writing is bad, its just a lot of the things you highlight as typography sins go against what most of us consider best practices. I would guess that you probably do a lot of design and not a lot of markup, like you pass a photoshop file on to someone else to code.

I think a lot of people on here are like myself, we design and do the markup. You look at something and probably put more weight into the design while I will usually shy away from a design element if I feel like it hurts usability, accessibility, or compatibility.

Like #8, how is that relevant to web typography? Faux-italics, or faux-bold for a photoshop document, or formatted quotes in that same document aren’t translated to the web. We use styling for that stuff, and the fonts come from your users computer.

#5 entities should always be handled with markup, never with alt+whatev_on_pc or opt+whatev_on_mac

GAH!!!
That was supposed to be a reply to comment #9 Michael Risser.

@Smashing Magazine
Why oh why is there a “Comment” link in every comment box? That implies that I get to reply to that comment.

Nice article Steven. I agree with some of the criticisms (would be nice to have the mac shortcuts), but I think a lot of them are unfounded or just plain stupid, don’t let them get under your skin.

@ people who think best practices, standards, and conventions are “pointless”, you might want to consider changing professions. Maybe you could be an inventor! You could invent a time machine so you could go back and design websites in the 90s!

I’m going to stick with my “dumb” quotes. I already have to take the time to convert them from the dreaded and evil microsoft word quotes.

One follow-up to my comment: the mac shortcuts would be nice to have for prototyping in photoshop (or whatever you use), and definitely should not be used in markup. I think the extra work of adding in the HTML for quotes ("), ampersands &amp, and … ellipsis is well worth the time.

I agree with Jason (#39) on his points.

My code tags got jacked in my previous post, but you get the idea.

The use of special characters for dumb quotes and ellipses make a mess for me when I show it on IE, but not on Firefox.
I am doing that on a Hebrew based PC but for an English post. Is there any way to fix it?

How did you arrive at #7: Underlining your hypertext links?

Since when can you change the underline color (without using border-bottom) to make it different from the text color? If the underline and text are the same color then how can you tell if the underline is below or above descenders in your typeface? You can’t change the underline color, hense you can’t see if the underline is above or below descenders in your typeface!

Embarrassing!!

To those pointing out that I used ASCII symbols instead of entities, you’re absolutely right, that’s a mistake. I sent in a draft copy of the article by mistake. I’ve asked Sven if I can send in a revised copy of the article, and hopefully he can get that corrected for me.

Prime mark is U+2032, and is a different character from the straight apostrophe (U+0027). Learn what you’re talking about before you write an article like this.

I don’t know what people are talking about with regards to “ALT characters on the Web”. Using ALT codes on Windows produces a UTF-8 character which can be safely included in documents. HTML entity references are an old hack we don’t need anymore. If they cause problems, it’s because you’re using old/crappy software.

Werson, no worries, after this response, I don’t think I’d want to write another article. :(

aai entidade a parada ficou fritante..
C.V
R.L

This is a good reference to check up on once in a while and see how many mistakes you still do.

Now how to we get clients to stop using emphasis tags like and ALL CAPS everything they say is so important?

Boy do I know a ton of people who need this article. Of course, I need to keep this list handy to double-check my own work!

Thanks for the excellent article. There are quite a few things that I would consider mistakes, but it’s nonetheless well-written and potentially helpful. It’s definitely the case that “dumb quotes” translate better, underlining makes more sense than border-bottom (semantically), and underlining should not be used for emphasis where it’s avoidable.

This is a classic case of bulking out some good points with some marginal to just plain bad ones. Number 7 was dictated in a client project recently and is frankly one of the worst web typography ideas I have ever had to deal with. The amount of extra conditions and classes needed to switch it back off items like images and extra markup when you want an underline and a border is just a major pain in the arse.

Like the photo touch up article, quality is preferable to quantity folks.

I thought this was a great article. If nothing else, it pointed out several tics that have been in my typography since being taught on an electric typewriter in the 80s. Some of these habits are really outdated on the Web.

Don’t let the bastards grind you down, Steven!

Seriously, no two spaces after a period? OK, fine for web content but seeing it in actual print makes me want to beat the author with a style manual. I will not now, or EVER, stop putting two spaces at the end of each sentence. Anything else is just wrong.[space][space]Period.

This was a very useful post. However, if you use incorrect grammar, you are just a hypocrite by being fussy about typography. Note the difference between “only use” and “use only”. The word “only” qualifies the word that follows it.

re: Stephen D
Werson, no worries, after this response, I don’t think I’d want to write another article. :(

Don’t let the elitist snobs bother you. Regardless if there were some inconsistencies or errors you don’t see any of them publishing any helpful content on Smashing Magazine. The guys here obviously found you worthy enough to post your content, and that’s what you should care about. Not about the whining and trolling and antagonism of so-called “professionals” who only try to start trouble.

Don’t be foolish to let some childish behavior of people ruin what you love to do. Instead of giving criticism and helpful advice they trash people. It’s immature.

re: brandon

-Text transform properties might seem like a good idea at the time, but what happens when you copy and paste content and then suddenly your content isn’t in caps anymore? think about it. its just a bad idea. Same goes for special characters that don’t copy.

Huh? It’s a CSS property. It doesn’t matter if you copy and paste anything. Whatever you put in between the item you have defined the text-transform property for will inherit the style. You don’t want it in caps anymore. Go to the CSS and take out the text-transform. Really not seeing your point here…

Great article!

Great post! (I voted “excellent.”) I disagree on the ellipsis item though. It’s a fairly common convention to use a triple period, and it works fairly well. I agree with the other items though (and I admit to being guilty of using hyphens instead of em dashes on a few occasions…).

I voted this article as bad. I’m sorry, but it is very misinformed.

I’m sorry, some of these aren’t sins, or even guidelines. These are one guy’s preferences. Have you ever looked at smart quotes on a mobile phone browser? Or in a lot of CMS’? Or in an RSS aggregator? I’ll bet you nine times out of 10 they show up as entity markup instead of the quote you hoped for. Sorry: you’re stuck with inch and foot marks. Furthermore, I was mortified to do a view-source on that point, and see that either Steve or the CMS left the high-ascii smart quotes in there. They’re not even replaced with the appropriate “ and ” entities. Those characters will definitely choke most systems. Sorry, Werson, you’re just dead wrong.

And underlining links? Since 1994 (and before in many help systems) underlined text has been a hyperlink. But Steve doesn’t like it, so its a sin.

“…after this response, I don’t think I’d want to write another article.”

Well, sorry, Steve, and maybe we’re being too harsh. But once something is published on the web it gets a kind of authority, and, well: wrong is wrong. Your point regarding smart quotes is especially problematic since mobile phone browsers really just can’t handle a lot of these entities. They should, but they don’t. And here in Europe that’s a demographic you can’t afford to ignore. Its coming to North America, too.

Good grief. In no particular order:
@Jeff: The only reason to use 2 spaces at the end of a sentence is in the event that a monospaced font is used. Also, using 2 spaces at the end of a sentence creates what are called rivers: A big no-no.

@Miles:
It is always worth using the correct typographic characters in a text. To not do so is to condone mediocrity.

@RonnieSan and @Niobe:
Lying and not telling the truth are one in the same.

@Karl:
If you don’t care about typography, why are you reading an article titled Top Ten Web Typography Sins?

@brandon:
They are referred to as dumb quotes for a reason. I myself would not tout my preference for something referred to as dumb. I also cannot see how having proper quotes in a text is bad. You may want to explain that.

As for me, I like the article. It is a simple reminder of errors that are still oh so common. There are some comments here that bring up some valid criticisms. A little bit of editing will surely improve what is at its heart a good article. Don’t give up!

orly? notice how smashing magazine is guilty of some of these too?

don’t preach principles which you don’t hold babes

i thought this was a refreshing reminder to think about how and why you write the way you do. this can often be overlooked, and as a result makes the web a sloppy place as far as writing/grammar is concerned.
i feel that much of the over-the-top negativity is due to some designers fear that this article might win the author a computer. we all think we could do so much better? well, you had your chance and the contest is close. providing feedback is more important than insulting someone to the point where they won’t post/write again. i’m sure many, many people got something beneficial from this post, and that’s the point.

Absurd. That is my response. What you advocate is what breaks the web to unusable status in many ways. These special characters are not only not rendered well in many applications and devices, these add very little if any meaningful benefit. Except for someone who has penchant for this, it matters little or next to nothing for the average joe surfing the web.

@carl:
So I should just give up trying to have a website with french content?

How about including the HTML Entities for each of these, the Alt+ command doesn’t do much good as we code our sites.

1. Em Dash: —
2. Ellipses …
3. Left Double Quote: “ Right Double Quote: ”
5.Copyright Symbol ©
9. Accented characters. For example, o's with different accent marks: ò ó ô õ ö

Link [petervcook.com]

One should know theese..
but good to have ‘em listed here!

Give the guy a break. All the stuff he mentions is valid for print design, I just don’t think he realized he was writing for a web audience. They’re valid rules for the print world, and a few of these are points that I’ve had to argue with the designers I work with.

For instance, there’s no way in hell I’m going to go into HTML mode in a CMS to create proper quotes. Its just not happening. Headlines… sure, but not body copy. It’s just not worth the time (money) and will be screwed up by the client eventually.

It’s would be great if so-called “smart quotes” have cross-browser compatibility, but they don’t and aren’t recognized in some email clients. Personally, I would rather have “dumb quotes” than no quotes at all.

Whether to use ellipsis glyphs or periods is a matter of choice. The ellipsis glyphs often aren’t very good, not mixing well with periods and commas, and so I think periods are a better choice in general.

Again, regarding em dashes, I favor them in print, but an en dash with surrounding space is another option, and a 3/4 em dash is another (which the “em dash” in the font may actually be, anyway). In monospace fonts a pair of hyphens might well be the best choice, though.

Basically: use your judgment, no?

Sorry to say, but this article is, simply put, pathetic. Unless you have a program that can automatically convert special characters to code, you’re just wasting your AND your employers time by not-committing-top-ten-web-typography-sins. The only one I can agree with, would be spelling out the names properly, as some people get rather picky about this sort of thing… but “dumb quotes”? More like a dumb article.

You can bold text. You can italicize it. You can underline it. You can even use all caps if you really need to hammer home your point. Just don’t use more than one at the same time.

Am I the only one to notice that he did, in fact, use both at the same time? Specifically italicizing and underlining a word. Yeesh!

@Justin Lilly:
he actually used three means of emphasis: underline, italics and colour. In this instance, I think that’s ok, he was trying to make a point…

There are plenty of mistakes and some bad advice in this article but for those that argue against using the correct elements such as em dash and ellipsis, do you think the w3c standards are just personal choice too? I always use the right element for the right job, it takes no longer if you know what you’re doing and gives a professional look.
You can prefer not to use the correct symbols, you can chose to ignore spelling and grammar - but I hope you don’t complain when bad designers ignore accessibility, w3c standards and build sites with tables and inline styling.
In the article I would have liked to have seen en dashes explained too. These are the dashes that denote an ordinal range (between numbers).

I also think dumb quotes are good, because it works cross browser, while ” will work in some browsers, but not in others.

No web designer in his/her right mind would dare use ALT+ characters in their HTML. Print out a HTML Character Entity reference sheet and keep it handy.

Never, never, never use alt characters in HTML or the Mac equivalents.

You have to use the HTML entity.

entities should always be handled with markup, never with alt+whatev_on_pc or opt+whatev_on_mac

These special characters are not only not rendered well in many applications and devices

Those characters will definitely choke most systems. Sorry, Werson, you’re just dead wrong.

What decade are you guys living in?

Link [marketshare.hitslink.com] (or look at any of the links on Link [en.wikipedia.org])

Internet Explorer (73.81%)
Mozilla Firefox (18.43%)
Safari (6.14%)
Opera (0.71%)
Netscape (0.62%)
Mozilla (0.11%)
Opera Mini (0.05%)
Konqueror (0.03%)
Pocket Internet Explorer (0.02%)
Other (0.08%)

Internet Explorer, Mozilla/Firefox, Safari, Opera/Opera Mini, and Netscape all completely support UTF-8. That’s 99.92% of traffic, and I’m not even sure about the rest (WebTV?)

As for e-mail: Microsoft Outlook, Mozilla Thunderbird, and GMail all have UTF-8 support. Is that good enough?

It’s 2008. Every meaningful browser has UTF-8 support. Yes, you can copy, paste, e-mail do whatever you want with it. Link [bp1.blogger.com]

I’m not saying using entities is wrong (it really doesn’t make a difference), but there’s nothing stopping you from using Unicode characters right now. Stop feeding outdated myths.

This is a pointless article. Content is the driving force on the web and usability is the next most important consideration. All items on this list of sins are too picky. None affect content and some even worsen usability.

My boss at my former studio made me commit #6 time and time again, and it drove me nuts.

Re: 75

You imply spaced en dashes can replace em dashes. This is untrue. En dashes serve entirely different purpose, the most common being to indicate a range. Even then, em dashes are only spaced by hairline spaces.

fantastic post
Link [www.duivesteyn.com.au]

Seriously?

An interesting read, though not something I would expect to win the contest. Most is common sense.

Double Spacing– I just can’t let go. I blame my 5th grade typing teacher.

Good. It could use correct examples following the incorrect examples. You know, for reference.

No double-space between sentences, really? That’s going to be hard for me. Is there some standards or governing body that did away with this convention, and I just missed the news? Single-spacing between paragraphs really makes me a little nuts, to be honest. *sigh*

Even thoug I don’t agree with point number 3- I think this is a fine article. Especialy the forst two advises. Thanks. :)

Nag nag nag. Web typography is not for print, so it does not have to follow strict guidelines. It’s the same with making websites accessible to deaf / blind / disabled people: not that many people care, there is no money for it and it makes things too complicated. /ignore.

The paragraph “3. Using dumb quotes” is the only one that doesn’t give advice on what the good approach would be.

Note that em dashes and ellipses cause a lot of trouble with content management systems.

The real number 3 should be: don’t use the “smart” quotes that Microsoft Word and their ilk creates for you, these characters were invented by Microsoft and won’t work anywhere else. Use either “” or “ and ” or even better, let the browser decide what to use and use tag. Also, please don’t use ” to mean inches or seconds, there is ″ or ″ specifically for this purpose, accompanied with ′ or ′ for feet and minutes. Funny how a list of “typography sins” includes one of more annoying sins as an actual advice. Oh, and by the way, don’t write 3×5, write 3×5, pretty please.

Oh, and don’t make the comment form convert characters behind the user’s back when the topic of the discussion may involve precisely these characters.

I like the article, but not sure about no. 7!

I’m surprised by the animosity in the responses. I agree with all of the “sins” except number 7; a border-bottom under low descenders looks terrible and is not easily disseminated from the other text on the page. When you’re breaking a web convention that’s had well over 10 years to take hold, you should make sure your solution is unequivocally better than the alternative.

As for everyone else getting so riled up about the example using Windows Alt+ combinations instead of HTML entities; you’re the ones who are wrong.

The web is perfectly capable of handling UTF-8 content in the markup so long as the charset encoding is defined as such. You can use special characters to your heart’s content!

God, I can’t imagine what the entity Nazis would say if they watched a Japanese/Chinese person code websites (unless you think they know their entire alphabet in Unicode Codepoints).

For the reference of any Mac users who want to know the equivalents to the Alt+numkeys, they’re (on a US keyboard layout):
Em dash: Shift+Opt+hyphen (en dash is without the Shift)
Ellipsis: Opt+Semicolon
Curly opening/left quote: Opt+[ (opening single quote is Opt+])
Curly closing/right quote: Shift+Opt+[ (closing single quote is Shift+Opt+])
Copyright symbol: Opt+G (Trademark is Opt+2, Registered Trademark is Opt+R)
Diæresis-O: Opt+u, o (Press opt+u first, then type the vowel to have the diæresis applied to that letter. U stands for ümlaut, I assume)

nice article, but i have diferent opinion about underlining hypertext links.

I enjoyed this article: it was snappy, clear and to–the–point. One small question: why does using bracket–c–bracket not cut it in court? I thought the simple act of publishing something on the web conferred copyright.

A couple more: using space instead of non-breackable space ; not using accent characters on capital letters ; not using ligatures.

Correct me if I’m wrong, but the majority of this seems to focus more on grammar and etiquette, not typography. Good article though, it’s good to be called out on things you know you shouldn’t do but let yourself get away with it when you think no one else cares.

@Kit Grose :

Thanks for pointing this out, I was about to say the same ;-)

It would be a nightmare to use entities for every special char we need, especially with accented languages like french or german! No to mention the puzzle when you store your content and want to search it through a database or manipulate strings with server-side scripting…

Mostly useful. I don’t agree with point 7. Unless you want to change basic conventions, leave the links underlined, it’s just going to look a bit weird.

Using character encoding is about as annoying as using Adobe Color Management, especially when it involves database collation. Such is life.

I liked it, cheers!

Great top-10 :-) First really good article in the contest, IMO - technical, not some philosophizing. I kinda disagree with #10, but it’s ok, I’ve just never found this property useful.

Most of these are difficult to do casually and naturally unless your text editor has autocorrect, or if this is a web-specific dev environment which can help.

Furthermore, some of these non-standard characters get mangled across various encoding sets when input as-is, making them more discouraging to use — em dashes are a prime example. (I’ve seen that go out fine in emails, but come back as a “?” I also think Atlassian’s JIRA doesn’t have full support for those extended characters.)

I

i dont know. web is web and speed is paramount. a nice display of anachronisms. like wearing a tie on sunday.

This isn’t typography — it’s copy editing, and to be blunt: “common standards” are as varied as the publications around the world. Though, I do still have my personal pet-peeves when it come to certain copy-edit quirks.

Many Link [ditley.com] make the mistake of using different fonts that don’t go well together. It is very important that the fonts are corresponding to one another. If you do decide to go a little wild with the font make sure you pick a font that has many different choices aside from bold and italic. If you’re working in InDesign there are many fonts that offer semi bold, book, etc. Therefore when you do go wild, your different fonts will still be in the same family.

The big one I do all the time is quotes mostly because I don’t care how they look . The point still comes across either way.

If I am copying from word in to a utf-8 page I will just leave the proper quotes in. I still work on sites or emails where I don’t get to use utf 8 and rather than going through and replacing them all with special characters I prefer to just use the “.

Big takeaway for me was using a border on a link and not text-decoration. I am going to try it out when I get a chance.

I have to respectfully disagree with most of this article. We are web designers, not print typographers. Our top priority should be usability and consistency, not “looking pretty.” There are far larger issues to address with readability, such as contrast, defining sponsored content spaces, inconsistent link underlining (ahem, Smashing!) and accessible font-size coding. I can usually call out someone who was traditionally schooled in typography, because their designs break in my RSS feeds, or on my mobile devices.

Often our designs are built for applications with user input, and those users are usually HTML-ignorant. Two examples off of the top of my head: this web form (notice I did not spend time using curly quotes), and editorial/business staff using a site administration tool. Anyone who has dealt with encoding issues, international users, and special character parsing (to remedy users who copy and paste in windows-1252 characters from Microsoft Word) knows why I might complain about the print design world invading the web design world. A bottom border is also not an underline, but a bottom border. You are making more (unnecessary) work for yourself when you change the box model display of your links, or when they wrap.

I’ve also often seen times where three stops seems more appropriate than an ellipsis character. There has been a debate about its display in the print world, but in the web world, wouldn’t it make more sense to use something simple and clean? Even Google uses three stops in its web results.

The capitalization line is a valid point, however. I’ve had to deal with old CMS systems where user content was converted to caps before being stored in a database. It’s always nice to have the flexibility to go back and alter the presentation, which we didn’t have with the legacy content, but you will if you control via stylesheet.

And yes, for places where special characters are very appropriate, use entities!

I did not read all of the comments, but did anyone of you mention Link [daringfireball.net]? It’s a small library, that fixes some of these problems. There are implementions for other languages (python, for example) as well.

Sorry, but I completely disagree with the double spacing between sentences. It just makes reading a paragraph much easier. That little period isn’t enough of an indication that a sentence is ending when the font is small. The double space gives your eyes more of a visual cue, and reading becomes much easier.

Stick with the double space rule.

I loved it. Very well thought out and informative, but I just wish that he elaborated more! That was very annoying to be left with quesitons after reading it. I rated a 4 none-the-less.

Thank You! I am guilty of a couple of these errors. I’m not sure about the border line instead of underline though. I guess I will start corrections from here onwards.. Thank You once again.

Terrible article. Especially the bit about underlining. You’re talking about breaking a convention of the web that’s been around nearly 20 years! This is basic usability stuff, FFS. The rest of this article is just nitpickery and nonsense.

And I can’t believe there are people comparing this crap to accessibility and other best practices. As a disabled person, that’s beyond insulting. As a web designer, I weep for the future of our profession.

Plus, double spacing between sentences is awesome. :-)

Very nice article. The first one I’ve read in a long time that was informative and made me smile, chuckle even. Thank you Steve. I’m sorry to hear you won’t be writing more articles.

I do have a question: when you use the em dash, do you space between the dash and the words? I’ve actually had clients tell me to “get rid of that long dash and replace it with a regular one.” Such is life.

simply great

I have to disagree with #7. Removing the underline from hyperlinks is an accessibility issue and using a bottom border is simply not appropriate. People who remove underlines from links are making it harder for people with visual disabilities to actually find the links, especially if you’ve used only color to indicate a link - some people with color blindness may never see your links at all.

While I agree with most of the points here, getting all twisted out of shape over an underline on a link because it cuts the descender is ridiculous.

I hate anything which doesn’t encode nicely into HTML. Weird quotes and em dashes are a no no.

I like this article, but I’ve got two gripes: First, what’s wrong with double spaces after a period? I don’t care what the standard is, I think it looks better.

Second, I’m not going to take the time to encode all the up and down quotes when a straight up quote is sufficient.

When we start wiritng a page we define the language. I write in en-gb, which has accepted typography standards that differ somewhat from en-us, and noticeably from fr-ca, etc. It also means that a screen reader will garner clues as to what to expect.

The only problem with quotation marks is browsers that don’t display the Q tag. Get over that, and we dispense with all the other disagreements, and it becomes language sensitive too. M$, are you listening? Meanwhile I use the entity codes ldquo and rdquo - it’s a pain, but they work better from a readability point of view in my opinion, as the slight directional slant even in a non-serif screen font gives the user a clue as to what’s happening.

I’m off to have a think about how I style my hyperlinks, since it had not previously occured to me that underlining reduced the readability. (I’m not going to switch to border-bottom because of the reservations expressed by previous commenters. I also want the links to show up in print, as I primarily write for my employer’s Intranet, where users frequently print the articles to take with them when away from the office.)

The other nine points - great. Thanks for being brave enough to weather the storm that you must have known would come (and duly has).

So what are the rules regarding the following:

#1: Do we type what’s or what’s. Which apostrophe sign do we use?

#2: Single spacing or double spacing between two sentences. I was tough years ago that I must use double spaces between sentences.

Nice article by the way!

I’ve had my experiment with hyperlinks and done some further browsing. My conclusion is that I’ll leave the underlines in and “pave the cow path” - the slight reduction in readability is more than offset (IMHO) by the probable frustration of users hunting or straining to find links.

I decided against the border-bottom method because I found it bumped into the ascenders on the line below with links in paragraphs.

I guess that an icon after each link would be an option (and there are plenty of methods for styling them), but I’m not going to bother for now, since I’ve already got one specific icon for external links. Also, any pages with lots of links would look like the page has measles!

Yes, entities for accented characters is crap. Just go UTF-8 an be done with it.