Let’s talk for a while about typography. One of the questions you can find yourself asking as you’re browsing the web is; is web typography different from typography in general?
It may seem that way. Many, if not most, of the blogs and other sites on the web are using typographical practices that are questionable if you know the basics. If you have no idea of what I’m talking about, continue reading.
The first thing I notice all too often is the use of straight quotes instead of curly quotes. At least in my own opinion, this is most visible and awkward when using serif fonts, though of course it’s horrible for sans as well.
Then we have the apostrophe—another character that is often poorly substituted with a straight quote. Word processors most often correct this for you automatically while simple content editors or code editors will not.
The third big one is hyphens and dashes. Yes, a hyphen is not a dash. For those of you who are not familiar with these; there’s one type of hyphen and two different dashes—the en dash and the em dash. What I just wrote was an em-dash, and that was a hyphen.
Another one worth mentioning is the leading, or line-height in CSS, which is something that can really be a pain in the ass if you’re used to great typography. A line-height that is too low greatly reduces the readability of any text content, and is generally annoying.
That leads us to the amount of (or often lack of), and composition of, negative space in websites. In too many cases, the negative space is used very inefficiently. This can make the website seem cluttered, and it becomes hard to focus and see what’s most important on a page.
These are just a few—there are a lot of these typographical details which people seem to believe don’t matter when you’re creating content for the web. Why is it that in a printed publication most of us understand the importance of proper typography but not on the web?
Well, first of all, not everyone of course is educated about typography. Not everyone is a perfectionist. Not everyone cares the least about how a piece of text looks at all.
Just a few years ago, I had no idea about what proper typography was. I did like everyone else and substituted curly for straight, and didn’t think about it at all. Only when I picked up a book on graphic design and typography, I became aware of these details.
Still to this day, I by no means consider myself an expert on typography. I have little graphic design experience and almost all my work is in development, not design. We can’t expect Mr. Average Joe to keep track of what’s great typography.
But I believe that we can expect the ones who call themselves “web designers”, or “web professionals” to have at least a basic understanding of the subject of typography. It’s one of the things that make a great website great. I’m not seeing that today.
My guess is that we just “don’t have time”, that we’re lazy, or just poorly educated. As for the lazy ones with no time; there are a lot of things you can do to speed things up.
If you’re writing content for a blog post, article or just creating website copy, just launch your favorite word processor that can do the work for you. I’m using an application called Scrivener to author this post and it takes care of most of what I need.
It doesn’t, however, turn the characters into HTML when I export it. For this I recommend TextMate, a beautiful piece of software. I simply either export the text from Scrivener and open the HTML file in TextMate, or I just copy & paste it in there.
In TextMate, it all goes very quickly. Just select the text and use the “Convert characters to entities” shortcut—boom, there’s your HTML. If you haven’t got the paragraphs yet, select the text you want to wrap in a tag and hit Ctrl+Shift+W to do it. Do the same and also type “h2” afterwards to get a heading element.
Applying proper typography to your content doesn’t require as much work as you may think. It’s definitely worth it to get a more readable and beautiful result. While I’m not a typography veteran, I certainly try to keep my blog posts and other content looking handsome, while I’m further educating myself on the subject.
If you too decide that you want to find out more about typography, these are a few resources I recommend to get you started:
REXML could not parse this XML/HTML: <ul> <li><a href="http://www.typographyforlawyers.com/">Typography For Lawyers (& Other People)</a>—An awesome site</li> <li><a href="http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/">I Love Typography, Guide To Web Type</a></li> <li><a href="http://fontfeed.com/archives/category/type-tips/">Font Feed, Type Tips</a></li> <li><a href="http://articles.sitepoint.com/article/principles-beautiful-typography">SitePoint, The Principles of Beautiful Typography</a></li> <li><a href="http://informationarchitects.jp/the-web-is-all-about-typography-period/">iA, The Web is All About Typography</a></li> <li><a href="http://webtypography.net/toc/">Web Typography</a></li> <li><a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography">Mark Boulton, Five Simple Steps to Better Typography</a></li> <li><a href="http://thephuse.com/2010/02/the-taxonomy-of-type/">The Taxonomy of Type</a></li> <li><a href="http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/">Fred Design, Rules For Good Typography</a></li>