{"id":242,"date":"2009-10-02T17:08:51","date_gmt":"2009-10-02T22:08:51","guid":{"rendered":"http:\/\/osric.com\/chris\/accidental-developer\/?p=242"},"modified":"2009-10-02T17:12:48","modified_gmt":"2009-10-02T22:12:48","slug":"typography-on-the-web","status":"publish","type":"post","link":"https:\/\/osric.com\/chris\/accidental-developer\/2009\/10\/typography-on-the-web\/","title":{"rendered":"Typography on the Web"},"content":{"rendered":"

In spite of my fondness for typography, I have always been fairly antagonistic towards web typography “solutions” like sIFR<\/a>. Sure, it’s a better idea than using a GIF file for every headline, but is it really necessary?<\/p>\n

I’m skeptical. What is it buying you, and at what cost? What’s the return on investment? Is it improving conversions, improving customer\/reader loyalty?<\/p>\n

To me, content is king. I’ve visited, bookmarked, and returned to many web sites that are no-frills black-text-on-a-white-background. I remember fondly the days of Gopher<\/a>, shortly before the rise of the World-Wide Web: all information, and no waste<\/em>.<\/p>\n

Let’s say there are 3 kinds of people in the world:<\/p>\n

    \n
  1. Graphic Designers<\/li>\n
  2. Computer Programmers<\/li>\n
  3. Everyone Else<\/li>\n<\/ol>\n

    Let’s look at these groups from the bottom-up:
    \n
    \nEveryone Else<\/strong>
    \nThese people don’t really know or care about typefaces. They are likely to stick with whatever default font is selected in Microsoft Office. To Everyone Else, there are 3 fonts in the world: Serif, Sans Serif, and Illegible.<\/p>\n

    (There is a curious subset of Everyone Else, known as Human Resources Managers. These cheery folks recognize 2 fonts: Comic Sans and Stodgy.)<\/p>\n

    Computer Programmers<\/strong>
    \nThese people know that there are many different font files on their computers, and that some are TrueType and some are PostScript. To Computer Programmers, there are 4 fonts in the world: Serif, Sans Serif, Monotype, and Illegible.<\/p>\n

    Graphic Designers<\/strong>
    \nGraphic designers love type. They are well-versed in the     anatomy of a typeface<\/a>, and speak lovingly of typeface designer Eric Gill. They can identify by sight 20,000 different fonts, and have probably designed several themselves.<\/p>\n

    On the web, you can be fairly certain that a given user will have Arial or Helvetica (sans serif), and some variant of Times (serif). There are a few others, but basically you tend to focus on serif and sans serif. You can adjust various type properties via CSS: font sizes, colors, leading (that’s the space between lines), and even letter-spacing. Take a look at 10 Examples of Beautiful CSS Typography and how they did it<\/a> to see some interesting examples.<\/p>\n

    At the recent WordCamp Birmingham<\/a>, I caught Sara Cannon’s<\/a> presentation on Branding WordPress. She talked about sIFR, and I thought that, perhaps for the sake of peace and brotherhood, I should go ahead and use sIFR and play around with some funky type. The sIFR text is selectable as text. It’s not as bloated as you might think–even the SWF file containing the specific fonts can be optimized to only include the characters you need–and even though it uses Flash, it is used to enhance the page on Flash-capable browsers. For everyone else, it still appears as regular HTML type.<\/p>\n

    Other folks at the conference (including Mitch Canter<\/a>) mentioned TypeKit<\/a>, a web-based service, as an alternative to sIFR. I decided to try it on this blog by using a couple fonts with a little more character for the title and headings. I think the typefaces I picked might have a little too much character–they are falling into my Illegible<\/em> category–but it works, and it’s easy.<\/p>\n","protected":false},"excerpt":{"rendered":"

    In spite of my fondness for typography, I have always been fairly antagonistic towards web typography “solutions” like sIFR. Sure, it’s a better idea than using a GIF file for every headline, but is it really necessary? I’m skeptical. What is it buying you, and at what cost? What’s the return on investment? Is it … Continue reading Typography on the Web<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[361,126,122,124,125,123],"class_list":["post-242","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-font-replacement","tag-fonts","tag-sifr","tag-typekit","tag-typography"],"_links":{"self":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/comments?post=242"}],"version-history":[{"count":3,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/242\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}