Web Typography .0

Thursday, November 19, 2009
By Atom Groom

Part: 1

Ah, interesting days are upon us in the creative wonderland that is Thee Internet. Some of you are probably well aware and others, not so much. Typography on the internet and web design is changing into a whole new beast. (it’s actually been around for awhile, but now catching on)

Briefly:
HTML5 and CSS3 are upon us, for quite some time now we’ve been using HTML4 and CSS2 to build out websites. Finally, a change has come and progression is happening. Within the CSS3 spec we’ve been introduced to the @font-face property. Simply put, this allows you to call a font from your server and shovel it right into you pages.

Awesome Right?! No More Arial / Verdana! No More Times / Georgia! Yes, it is pretty cool, on first thought… but the web design community across the planet is thinking about it a little bit more and there’s a lot of mixed feelings about it. That is the focus of my post.

Let’s start off on a positive note, what are the benefits?

  • we won’t have to make graphics, flash or other methods for all of our custom fonts
  • we won’t have to deal with developers telling designers not to use “that” font
  • we might experience faster page loads (depending on font file size)
  • your website users won’t need the font on their system to see it
  • most new browsers are supporting this feature now
  • enhanced creativity for designers and developers
  • web services are enabling paid services to use this technique “legally”
  • more

Okay, so what are the disadvantages?

  • legalities and piracy (fonts are intellectual property and therefore cannot be published online)

    anybody can drag a system font onto their server and dish it out, but did they pay for it? Probably not? Do you pay for your fonts? (don’t answer that)

  • aesthetics – how will designers / non-designers handle the doors of this flood gate?
  • web users are “prompted” with a window and asked if they want to use this font (scary! I say no, every time, is it a font, or a virus!?)
  • anti-aliasing and other cross browser inconsistencies

Part 2:

Now that you have small idea of what’s out there, the good, the bad, etc., How do you feel about this, think about it…

Aside from legalities, let’s take it a step further. Many of us are graphic designers. Some of us have dabbled or worked in web design.

So if you’re a graphic designer, does that also automatically make you a web designer? Chances are – probably not. (I mean that respectfully).

Being a web designer does not just mean knowing how a web site should work or look (interface elements). Being a web designer requires many more skill sets and typography is just one them.

Example, Please?
Open up just about any printed book and the body copy you’ll see is probably a serif font. Now go surf the web and take a close look at the body copy, you’re probably going to see a sans-serif font. (* there are always exceptions to this idea)

Why? Because people, companies, designers and developers have spent tremendous amounts of time into studying how people read on screens vs. printed material. They have studied how color, size, the amount of words per line, line-spacing / kerning, all affect the reader differently when viewing on-screen.

Tying it all together:

So what am I getting at with Part 2? With the ability to use just about any font-face online..

  • Will Graphic Designers and Web Designers be careful when selecting fonts?
  • Will they choose the right combos wisely?
  • Will they use too many type faces, just because they can now?
  • Will “creativity” over-ride the fundamentals of readability on-screen?
  • Will Graphic Designers think differently when selecting type?

It’s interesting conversation. I don’t know that just because @font-face and CSS3 are here, that these questions are really “new”. Maybe the are re-surfacing because of the new technology.

I personally have struggled with this topic way before CSS3 and HTML5. I’ve worked with Graphic Designers to understand screens vs print in regards to readability. I’ve learned myself, because I started out as a Graphic Designer.

I believe that designers will continue to respect typography as they always have. I think that this new technology might actually hamper the idea that web design, is it’s own “medium”, to Graphic Designers (it’s not a poster, or a flyer). It’s extremely important that Graphic Designers understand the web vs print concept.

I am concerned that non-designers and “creative hacks” will really start to use typography in terrible ways and really make some “nasty” looking web pages.

So. What will you do? What are your thoughts on this subject? How will this affect you 1 year from now? 5 Years from now?

Please, speak your mind.
~AG

Further Readings & Article Inspiration:
http://www.alistapart.com/articles/on-web-typography/

Author Info: Atom Groom

Since 1995 I have been a passionate creative. After being accepted into design school I progressed from hand drawn artwork, into graphic design, web design, motion graphics and digital video production.

I founded NWICreative.org to spark interest in the hearts of artists, creatives and the like in our region online. I want nothing more than to see our creative community grow and flourish.

7 Responses to “Web Typography .0”

  1. I might be a little jaded since this is such a new technology. But I tend to think that this will separate the true professionals from the hacks that get a copy of photoshop/dreamweaver and call themselves web designers. I think we have all experienced working with “designers” with no real training or idea about design concepts, readability etc. Not only in print, but now it seems in web.

    Overall, I love the progression that we are seeing in the technology. But just like anything else in life, moderation is the key. At the same time, I am truly in awe of someone who has the ability to create beautiful design with such limited resources such as 5 typefaces. To me, that is where you separate yourself from the group.

    A college once told me, just because you can do it, does not mean you should.

  2. college = colleague

    wow.

  3. As a graphic designer that creates UI’s this is very intriguing. My role in creating a website is on the front end of things, having the ability to work with a programmer that has this knowledge would be great (lucky I do).

    The questions at hand…

    * Will Graphic Designers and Web Designers be careful when selecting fonts?
    The good ones will, there is always going to be that group of people that muck it for everyone.

    * Will they choose the right combos wisely?
    The good ones will.

    * Will they use too many typefaces, just because they can now?
    The good ones won’t.

    * Will “creativity” over-ride the fundamentals of readability on-screen?
    The good ones will have self-control.

    * Will Graphic Designers think differently when selecting type?
    They should as much as they are now.

    My point is that the good web cats out there will know how to swing the axe and the bad ones will just chop their fingers off.

    Good and bad design will always be around. Just because a designer will have the ability to use any font – will not make bad designers, good, and vice versa.

  4. Bryan Redeagle

    want to know about this “prompt” you got because I’ve never seen such a thing. Is it a Windows thing (I’m a Mac user)?

    I unfortunately wouldn’t count on HTML5 and CSS3 any time soon. The “design by committee” method employed by the W3C will make sure of that. The wide spread use of Javascript on almost every major site makes it so that most people have it enabled. This means that the type services will be the most feasible in the next 5 years (minimum). We as designers need to really push and support them to show foundries that we want to work with them to protect their rights and make the web a more beautiful place.

    Also, I wouldn’t worry about non-designers abusing typography because they already do. Terrible designs are everywhere. That’s why people pay designers (or not in the case of some businesses of NWI).

  5. @Bryan-

    The prompt can be seen in Firefox, if you setup your @font-face correctly (not using javascript) and the font is not already on your system – Firefox will prompt and ask you if you’d like the font to access or system.

    I believe Safari does the same, I am also Apple based. I’ve seen it on other sites as well, it’s pretty obtrusive if you ask me.

    I agree with you on HTML5 and CSS3, in fact, I think it’s pretty humorous that newbs’ all over the internet are trying to use it and even go so far to post it on their resumes or list of services! ~ Uhhhh it’s not done yet, nor does it even work for many people! So funny to me, these individuals more than likely also, probably do not have stats on their users browsers either!

    BUT – if they can set up their site using HTML and CSS3 and still have it degrade nicely, then kudos to them. :)

    I also agree about Javascript. More than likely it will be Javascript based – however I would not be surprised if another method was implemented. Maybe a font is a allowed to access the browser via a temp folder, rather than downloading it and accessing your system?

    Thanks for the feedback and thoughts.
    AG

    • Bryan Redeagle

      @Atom-

      Yeah, I see what you mean. Though most users will just click the thing to make it go away.
      I can’t get it to show up on Safari. The css just works.

      I’ve been paying very close attention to HTML5. The only way to get it to degrade gracefully is to either not use the new tags, or nest HTML4 friendly tags inside the new ones (I’ve tested this). Both methods defeat the purpose of HTML5.

      Also, there is another method that’s been tossed around. It came to my attention via Jeffery Zeldman that David Berlow proposed that a simple method would be to embed a permissions table into the fonts (http://www.fontbureau.com/otpermtable/). The real only issue with it, I think, is getting it supported in browsers (especially a certain browser from Redmond…).

      Until then, FontFont has announced that their typefaces will be appearing in Typekit (especially one of my favorites, the Meta family).

  6. @Bryan-

    You should feel more free to announce publicly that Internet Explorer sucks. :)
    I do, at least once a day.

Leave a Reply