Typography
Remember how you stopped using italics because they looked so bad on web pages, but then when the operating systems started anti-aliasing you started using them again? Well, think again, my friend. They’re worse than ever on the small screen:
This Rugby Logotype Comparison is a great “illustration” of the way Flickr facilitates an ongoing visual conversation.
UsableType: Web Typography Guide is a great collection of articles on all things typographical for the web, from measurements units in CSS to sIFR. (via)
Typo Magazine, published bi-monthly in English and Czech discusses Typography “from different points of view and with connection to other fields such as architecture, photography, social science, and aesthetics.” A recent issue (#13) includes very in-depth articles on word recognition and on-screen legibility. And back issues are available for PDF download (password required for printing, though I’m sure you can figure a way around that if you really want).
TypeNavigator is a visual search engine for fonts. It’s great for when you know the form you want, but don’t happen to know a specific face. And, interestingly, works much much better in many real-world cases than concept-based font search engines. (via)
FontEditor lets you design your own bitmap font and then download it as a TrueType font. (via kottke, who appreciates your support)
If you’ve never read Ellen Lupton and Abbott Miller, you’re in for a treat, and I just noticed that they have a web site with a whole buncha essays. Poke around and you’ll find gems like this: “Typography is an interface to the alphabet…Readers usually ignore the typographic interface, gliding comfortably along literacy’s habitual groove. Sometimes, however, the interface should be allowed to fail.”
Jason may not like it, but sIFR replaces tagged HTML type with Flash so you can embed a display font without upsetting your precious document structure. I think of this less as an absurd hack (which it assuredly is) than as a big “get your s**t together” to the browser and type makers.
If I were in London, I would go visit The Type Museum. It’s still in development, but they have cool stuff like this big fat italian M:
Autotrace is an open source app that converts bitmaps to vectors (just like streamline, RIP). And there’s even an online version (note: your art will be saved on their server, so it ain’t private). There’s also Silhouette, and probably others (or you can just use Flash’s Trace bitmap command).
This set of type guidelines includes pleasing hand-drawn illustrations and a practitioner’s description of basic type design concepts:
Designing type is nothing more and nothing less than harmonizing black and white shapes. Black can’t exist without white, and white can’t exist without black. Black, the shape of a letter. White, the space in or in between letters.The site also has a collection of type resource links. (via kottke)
Max Kisman is cool: “The We Love Your font is an experimental set of characters derived from my 1986 TYP/Typografisch Papier contribution ‘What every Dutch boy carries in his pockets’, an alphabet composed of small found objects.”
Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a total mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Fcuknig amzanig huh? (via taylor)
Update: Here’s an explanation of how this works as well as a debunking of some of the inaccuracies:
I’ve written this page, to try to explain the science behind this meme. There are elements of truth in this, but also some things which scientists studying the psychology of language (psycholinguists) know to be incorrect. I’m going to break down the meme, one line at a time to illustrate these points, pointing out what I think is the relevant research on the role of letter order on reading.
More baby faces than a delivery room: minifonts.com
BURO DESTRUCT—TYPEDIFFERENT.COM. YUM! And, while I’m drooling, this is one of my favorite publishers: die gestalten
Fontscape is a directory of typefaces organized by multiple different attributes, including Application, Mood, Period, Appearance, and Simulation (pen, handwriting, LCD). It may be imperfect, but it definitely shows the limited usefulness of the various standard type classification schemes. (via xplane)
Like a humanist sans-serif phoenix, rising from the ashes of Lines & Splines, Andy launches New Series. (via typographica)
Behind the Typeface: Cooper Black (via a bemused eh)
text sizing—up the garden path is a collection of screenshots showing what text will actually look like on different browsers using different techniques. Something I’ve conscientiously intended to do for years.. thank you Owen! ps—While I appreciate both the ingenuity and the intention, I think this hack is completely absurd and I hereby take a solemn oath never to take part in any such browser-coddling shenanigans. Text-resizing be damned. OK, so maybe it’s not such a bad idea after all.
Someone wrote me asking for evidence to support my assertion that serif vs sans was of limited use in predicting legibility on screen. I can’t say I found a lot, but here’s some: HFI reviews a CHI study comparing Times and Verdana (negligible difference) Swedish study (PDF in Swedish) comparing Verdana and Georgia (slight advantage to Georgia, maybe) CHI ‘95 study comparing Arial, MS Sans and MS Serif (size matters, Arial sucks, otherwise negligible) Usability News compares Arial and Times New Roman (scroll down to find that other factors matter more than serif vs sans) and again, with more fonts (century schoolbook, times, georgia, arial) US Gov says it doesn’t matter, but don’t skimp on size (thanks jcdriscoll!)
Alphabet26: “It was Mr. Thompson’s idea to combine the best upper- and lowercase letters into one simplified, unified alphabet using only 26 symbols.” (via currentform)
I love Mark Eastman’s Visible Signs, especially as a longtime San Franciscan. Which reminds me that I keep meaning to photograph the Oasis Inn. (via lines and splines)
Hey, look at me! … I wrote a Typography Tutorial for Webmonkey which includes both an intro to typography and a look at issues and technologies for using type online. (Thank you, Eric, for letting me bounce ideas off you and for the sublime quality of your rants!)
Metaphor of the day: Typefaces are like flavors of ice cream… better to have a few really good ones than 100 that are kinda lame.
Linotype’s Font Identifier helps you id an unknown font based on questions like “Does the ‘Q’ tail cross the circle? ” complete with illustrations of each answer. I’m not sure quite how useful it is for identification purposes since you need access to more than just a few scattered letters to answer the questions, but it’s potentially a great learning tool for people who want to better understand what distinguishes one typeface from another.
Anyone out there know the story behind the choice of ‘fantasy’ as one of the five generic CSS font families? I’d love to hear it.
Brian pointed me to this slightly absurd but way cool hack for identifying installed fonts. Basically, it writes a bit of text in courier and then in the face you’re detecting for and compares the width. If they’re different, the face is present. The script was written pre-mozilla, though, so it’d have to be updated to work for W3C DOM browsers, but that shouldn’t be too hard. Of course, this begs the question of why no one’s thought to expose the system’s installed fonts to the DOM yet.
What I want to know is why I can’t specify type in CSS to degrade to different sizes, like so:
.sansesque { font: 12px Verdana, 14px Helvetica }Because, given the x-height difference, those are really more equivalent than if both are at the same size. Does anyone know a workaround for this (or a reason it doesn’t make sense)? And no curmudgeonly rants about how ugly Helvetica looks at 14px on a computer screen.
Not sure if people visiting your site will see that lovely “georgia, verdana, helvetica” you specified? You can find out what fonts are supplied with which products on the Microsoft Typography—Fonts and products page (not strictly limited to Microsoft products).
Antenna today is brought to you by the letter B.
Too much tiny type…There’s a good chance you know about Jason Kottke’s Silkscreen face. And I’ve already linked to Derek’s bitbet. And then there’s one of my faves, Mini 7. But of course the web’s all about excess, so there are actually approximately 5 billion (slightly) different tiny typefaces out there, including the 04 series by Yuji Oshimoto and the hi-type collection and I’m sure many others.. enjoy!
Yuji also happens to have made the cutest javascript toy ever (click on “Change Machine”).
There’s a collection of typography resources hanging off the well worth reading (if a bit curmudgeonly) online type article The Destination Matters More Than the Journey. (via MeFi)
Handfont—Your handwriting as a digital typeface. Heh.. maybe your handwriting. Have you ever seen mine?
I like collections like Victor’s gallery of blurb treatments. Maybe I’ll start a collection of IAs’ collections.
I really dig people who really dig typography: Typography for Writers
What the Font. Upload an image of a font and it identifies the font. I ran across this months ago and keep meaning to try it before posting it, but well, what the heck. (probably from linesandsplines but I can’t remember)
Nice brief intro to type: Type Fundamentals for Non-Designers. If you want to learn a whole lot more, including history, I also recommend The Elements of Typographic Style. (via Vince)
ps—It’s not surprising Vince mistook another font for Silkscreen, since there’s not a whole lot of variation you can do and still have a readable font at 5x5 pixels. If you look carefully, the C, A, and E are near-identical, but Jason gave a bit more width to some characters (like N and S). On the other hand, these two are closer to each other than to, say, derek’s bitbet, but they’re also a lot easier to read.
Sorry to whoever pointed me to Lines & Splines, a cool typography log, I’ve forgotten who you are. But I like the log a lot. (ahh.. just remembered it was kottke)