Giving Full Typographic Control to the User
So I have this friend named Lavina who occasionally sends me e-mails and instant messages set in Comic Sans. I have told her repeatedly that this font has been officially banned, but she “just likes it” and continues to use it in various pieces of correspondence… even if it is just to piss me off.
So that got me thinking, should a website allow you to explicitly set the typeface of what you’re reading? Most sites set the typeface for you. My site gives you several choices derived from what I find to be very readable faces: Lucida Grande, Verdana, Helvetica, etc. But what about the edge case that just really loves Comic Sans? Should I throw Comic Sans in my dropdown menu on the right side of this site? Clearly not, unless I want to be publicly ridiculed at work.
What I decided to try instead was adding a custom font field to the Readability section on the right side of this site. Click the “Or, specify your own…” link and type in any font you have installed on your system. Then, hit the “Set” button and voila! Mike Industries will reluctantly render in whatever twisted typeface you happen to think of that day. Even Comic Sans. Or worse yet, Giddyup (see picture above). The only downside is that you need to type the font name in exactly as your system labels it. So for instance, on the Mac, “ComicSansMS” works but “Comic Sans” does not. If you have a particular font you’d like to specify, just try a few variations of its name, with and without spaces, and you’ll get it after a few tries. If you don’t get it, the site will just render in whatever your default font is.
One thing I’d really like to be able to do with this is have a dropdown menu with all the fonts a user has installed instead of making people type a font name in. Does anybody have any idea if this is possible? My suspicion is that if it is, it may require writing something OS-specific… bad.
So for now, please enjoy the Custom Font Selector, and let me know if you have any ideas to improve it. I feel like this functionality is best suited for OS X users right now because we get to view true anti-aliased Postscript fonts in our browsers, but as mentioned with regard to Comic Sans, Windows users can “benefit” too.
There was a time when I did not like to give full control to users for anything. Period. I have changed that attitude slightly due to the nature of this medium. But I wonder if offering the level of font customization you write about is useful. This blog’s audience, such as designer and coders out there, might give it a go. But what about the average user? Do they really care what font they are reading. I doubt if most average users even know the difference between Helvetica and Verdana, for example. As long as text is readable I think users do not care what font is used (within reason.)
Furthermore I think the browser is the best tool for resizing text, as opposed to alternative stylesheets, for example. Internet Explorer is an issue in that regard, but Safari, Firefox and Opera offer solid font resizing capabilities. So right now alternative stylesheets are a good and useful way to provide users of Internet Explorer with a working alternative. Personally I think Opera gets it right by zooming in the entire page, as opposed to only text. Atleast in that case I know my layout will not brake or look bizarre.
In my opinion typography is not only a matter of readability, it is foremost a matter of style. But I have to admit that the web is place where the selection is limited. Very limited. Using Flash is an option, but realistically only for headlines and similar shorter passages. Eventually your customization tool does not get in the way, on the contrary. Users can either use it or decide to ignore it and trust the default settings. Personally I prefer to trust the judgement of the designer and go with whatever the feel was right.
This is a very nice technique! Great work.
Great post, Mike!
I post quite a lof ot code samples (X/HTML, CSS, C#, etc) on my site, and my biggest scare with giving too much control over fonts is whether this code enclosed in <pre> tags still fits in the content area. :) I’ve added a text size switcher, but I know up front how wide a <pre> area may get.
Since I float columns IE may push one underneath the other should it get too wide. Firefox and Opera handle it just fine, as you know. A slight overlap is no biggie.
Is there a good way to facilitate font selection and make sure code samples don’t go wild?
Mike,
I like the option of choosing a font to use. However, I don’t think you need to have the controls for switching the readability on every page in the right navigation, like you do now. You might want to consider making a specific page just for readibility. I really only see a visitor making that change once, so it is not needed on every page. Plus you could add other options like text color.
By the way, I like what you have done with you site.
Yep, I agree with Didier in that in an ideal world the browser would specify the user’s preferred font. Unfortunately, a lot of people don’t even know they can change their default font, and even if they do, that preference doesn’t really get honored unless the designer specifies only “serif” or “sans-serif”.
Here is what I do instead. I created a local stylesheet containing just this line:
html, body, p, td, font { font-family: "Lucida Grande" !important; }Then, in my browser preferences, I opted to use this custom stylesheet. I use Safari, but I believe you can do this in most browsers these days. The end result is that a good 95% of body copy that I read on the web now is set in my typeface of choice, Lucida Grande.
Milan: I hear you on the code sample thing. The only 100% safe way I’ve found to display code is between < textarea > tags. It’s not super sexy but at least you can control the width of the textarea that way.
Blake: Yep, I agree that users probably don’t need to use the Readability widget more than once. I’m starting to think about solutions where it may be very prominent on every page until you actually use it. Then, after you use it, maybe it would appear only as a small “Readability” link, perhaps right above the Invalidator Badge. Since the entire widget is rendered with this one line of javascript:
… it shouldn’t be too hard to place it in different locations dynamically.
i think that keeping at least a small link even after first use is important, in case they want to change back.
also, is this something that would be remembered on the next visit, or would they have to reset each time?
What appeals to me about this is that I was able to set Myriad as my text face, and then ‘tune’ it with the size drop down until it looked great on my monitor. Given the huge difference between unaliased Windows XP type and ultra-smooth OS X sub-pixel rendering, there’s no one-size-fits-all solution for type. Allowing adjustment to taste is smart, nice job.
(naturally, it’s impossible to rely on in a production environment since no one else will use it; but it’s a nice accoutrement for those who care!)
Nice idea, Mike!
Regarding the problem that “ComicSansMS” works but “Comic Sans” doesn’t:
You could change your script to recognize a variety of spellings for each font. Seems like that’d add a lot to the tool’s usability. Looks like you’re already doing that with Times and Trebuchet, which is a nice detail.
Also, you might consider escaping double-quotes in that input box. Check out what happens when you add this as the font:
times”; display: none; font-family:”times
I’m not sure whether any fonts out there have double-quotes in their names, but it’s probably worth escaping ’em in your tool.
Nice idea, though I too wonder there are any benefits for the casual user. Adding to Adrian’s idea: try entering this:
” } body { display: none }
Or similar terribly messy things :D.. Had to delete the cookie to be able to view the site again!
Milan: what about using the CSS overflow: scroll property, so that if code gets too wide, it appears in a frame-like window with a horizontal scrollbar?
I’m not comfortable with giving that much control to users :) Typography is an integral part of the site’s design, and I often use line-height and spacing to tune it to a place that complements the design of the page. (Trebuchet on my own site is an example) I guess I don’t want to release my design to the point that someone can easily replace all that work with Comic Sans or something else that makes my entire design look laughable. It’s our job as designers to ensure that page text is easy to read and preferably easy to resize; if we do that, I think people couldn’t care less about what the font actually is.
Damn you jokers for trying to break stuff! :)
That’s a good idea escaping the field before it gets into the cookie. I think I’ll probably escape the whole thing, just to be safe, and then replace the percent 20’s with spaces. That should make it pretty tamperproof.
As for the names of fonts, I don’t think they are really allowed to have anything but standard letters in them. I could be wrong… I’ve just never seen one with any special characters in it.
As for giving the user too much control, that’s definitely a personal decision. As for me, I’m fine with making my suggestion to them the default (Lucida Grande Mac, Verdana PC) and then letting them switch to whatever they want if need be. After all, if they choose Comic Sans, they are only choosing it for themselves. Not for other users. And as Dave S. said, people may have great fonts on their system like Avenir or Myriad, so why not let them use them?
Mike,
Why not make a Flash form, then use the getFontList() function to get the list of the users installed fonts? Or are you looking to not use Flash here?
Josh,
That is a great idea! I’m on it. I’ll serve a Flash readability section if you have Flash, and the current HTML one if you don’t. Perfect.
The only thing I’m worried about is Inman getting one out before me.
Also, the current textfield is now fully escaped so it should be unbreakable.
tisk tisk, such competition :) i was surprised you hadn’t thought of that already… the only limitation, is that its in a Flash form, and cant go over any HTML…. Shouldn’t javascript have a function like this?
It’s less competition and more of Shaun just being the quickest damn problem solver I know. He is The Wolf.
I guess one of the reasons I hadn’t thought about it was that it’s such a weird juxtaposition: Use Flash to increase the readability of HTML. Great idea though, and definitely a stellar example of crossing boundaries to solve a problem.
Personally I’d much be allowed easy control of the entire site stylesheet by virtue of a “CSS signature” than a cookie just for font selection.
I doubt I’d actually use said control, but it’s generally a painless feature to implement, and really helps in cases where my generised user stylesheet causes problems with the site style (Daniel Glazman’s Web log is unfortunately a good example).
http://homepage.mac.com/matsimpson/.Pictures/comicsans.gif
Cool little tool to show all fonts on your machine:
http://www.stcassociates.com/lab/fontbrowser.html
using Flash.
Dan,
Oh man, that is one “interesting” header you have on your site there. :)
You may also be interested in The Comic Sans Appreciation Society. Check them out. They are doing some really groundbreaking work in the Comic Sans realm right now.
Hahaha! Praise indeed! I can almost see the distaste in your quote marks :¬)
And thanks for the link, it’s time to stop villifying comic sans and show it some love. Maybe when I get rid of the fish I’ll get rid of the helvetica too and make my site a bit more jovial and inoffensive…
ps – The guy who made the comic sans image I linked to up there; he has badges. I can put a good word in for you if you’d like.
Giving users the chance to define their own font is all very well, as long as your content is defined enough to be styled.
*cough* ‘benefit’ *cough*
Pedant? Moi?
Brian, the fontbrowser you linked to is absolutely great! Even just for local use it’s pretty much what I’ve been looking for.
Mike, is there any chance of adding the Bitstream Vera Sans Font http://www.gnome.org/fonts to the default list? It’s a great free font, which in particular Linux users have installed.
Update: I just tried using Flash’s getFontList() function to produce a list of what fonts are installed on a user’s system, and at least on OS X, the font list nomenclature doesn’t match up with the way you’d have to call the font from a stylesheet. For example, Flash returns “Akzidenz Grotesk BE BoldEx” as one of my fonts, but the only way to get it to render as that font in HTML would be to lose the “BE BoldEx” part of it. Other fonts returned in the getFontList() function don’t render at all. It seems like all of the simple pre-installed fonts work fine, but anything with Postscript variations breaks. I’ll continue to investigate as I really like this idea.
AkaXakA: I’ll add Vera to the default list if you really want it in there that badly, but that’s what the custom font field is for! Don’t you Linux guys like typing stuff better than pointing and clicking anyway? :)
The CSS specs require font names which contain more than two words to be enclosed in double quotes. So:
font-family: Verdana
font-family: Adobe Garamond
are okay,
but:
font-family: “Times New Roman”
is necessary.
It’s in the W3C pages somewhere, it came up on css-discuss a while back. I’m too lazy to look it up.
Apologies for being off-topic but I just noticed a very strange behaviour: (in Firefox0.9) if you use your mouse to select some of the text in a comment box and then move your mouse down the text scrolls up and completely disappears. I haven’t ever seen this before. Curious.
Jim, that must be a local issue on your end, because using Firefox .9 here doesn’t produce the same effect.
Bill, it doesn’t seem to just be a local issue. I can replicate the effect here using Firefox 0.9 on XP.
Perhaps it’s only caused by the Windows version.
i’m seeing the same effect using firefox .8 and win2k.
looking very quickly at the css used for the site, i would guess it has something to do with the huge numbers and/or some padding in the comment containing DIVs. that mixed with the overflow:hidden is the likely culprit.
i think it would still look cool if you took out the overflow:hidden property and just let the minimal comments become the height of the big numbers. i’m not sure that is what would happen, but if it did, it would balance out the small comments guests leave.
i hope that makes sense…
I personally HATE Comic Sans, but it currently is the only widely spread font that is readable for Dyslexic people. Many companies/Universities (officially or un-officially) use it in their literature for wider accessibility and readability.[2,3]
There is a new font out there called “Read Regular”[1] that was a Thesis project to create a better font for Dyslexics.
So before we ban Comic Sans outright, it DOES server a purpose that can’t be filled by another font.
[1] – http://www.readregular.com/
[2] – http://www.dyslexia-teacher.com/t136.html
[3] – http://www.dyslexic.com/database/articles/print/fonts.html
I HATE Comis Sans!!! That’s true!
I was looking for a way in which, in the re-design of the Hunter Apana web pages (see URL – it desperately needs one), I could give the user independent control over colour schemes (themes) and font size – this page (and your site) is a great example of that.
Keep up the good work.
Very good Thank author this article is quite good!
I think you should have comic sans on your selector also ;)
At the risk of a tangential link, let me offer http://typetester.maratz.com/ to the mix. A very cool text editor/previewer that lets you check out how fonts will look on your site.
It has color, size, all the good stuff. Check it out!
Er, actually the best ever font tool I’ve ever come across is THE FONT THING. All it does is allow you to browse folders (and defined collections) to view fonts, and also to install/uninstall them as well. Probably outdated by WinXP or something (it’s PC only, but I’m still using WIN98) but it’s FREE.
Web page at http://members.ozemail.com.au/~scef/tft.html
Giving Full Typographic Control to
Giving Full Typographic Control to the User by Mike Davidson…