Archive for the ‘Typography’ Category

Accessibility of Dingbat Webfonts

Tuesday, August 17th, 2010

Inspired by Jason Santa Maria’s Tweet:

I love the idea of dingbat webfonts, though I want someone to write an article on the accessibility of using them.

The idea is fairly simple: Draw up some beautiful flat-colour vector icons, wrap the whole set into a font, and then load it as a webfont to display the icons on your page. Simple and clean, right?

There are problems.

In effect, you will be littering your page with a list of ‘j’ and a ‘h m n p’ near the title, with some ‘s u f’ in some other places. What does it mean? It’s completely indecipherable unless you successfully load the font and have the required experience/cognizance to recognize the meaning of the shape. A lot of people just aren’t good with icons.

There are some standard solutions. Wrap everything up with plain-text mark-up, then add the symbol and negative-indent the semantic text away.
In browsers that don’t support web-fonts, and in screen-readers that read out text on the screen (which would be all of them), the code would still contain a bunch of odd letters or numbers everywhere.

Someone mentioned a page from Opentype in his post, where they make a characterset which has most of the letters blank, with the ‘W’ mapping to their logo.

So how’s this:
Make an icon set with most everything blank, and then put twenty-six icons in the capital spaces. Put the shopping cart in ‘C’, because ‘cart’ starts with ‘C’. In your shopping cart example, it could say “Purchase, go to shopping Cart” but the “, go to shopping art” would be blank, the “C” would be the shopping cart symbol, and you’d see “Purchase []” where [] is the symbol.

You’d be limited to twenty-six symbols, and each must be applied to the letter you’ll use to start its name (unless you don’t mind the text “caRt” or such).

Pixels Per Inch

Tuesday, August 3rd, 2010

When dealing with screens, the density of the dots that make up your picture is referred to as ‘pixels per inch’. This measures how many pixels, lain end to end, fit along a one-inch line. A screen 10.24 inches wide and 6 inches tall, at 100 pixels per inch, would contain 600 rows of 1024 pixels each. (The diagonal measurement of such a screen would be 11.86 inches, by the way.)

Here’s an example:
Because it’s hard to show high-resolution samples on low-resolution screens, I’ll show you a low-resolution example. This illustrates the difference between two screens; but the size depends on your own screen’s density, so the numbers aren’t absolute.

Take Monitor #1 and Monitor #2. Both are about 11.8 inches; but Monitor #1 has a resolution of 1024×600 pixels (1186px diagonal) while Monitor #2 has a resolution of 341×200 pixels (395px diagonal).
Pixels per Inch. 1186 pixels per 11.8 inches is about 100 pixels per inch. 395 pixels per 11.8 inches is about 33.4 pixels per inch.

Having few pixels per inch means your computer has very little to work with, and the images will be blocky. Having a large number of pixels to work with means your computer can display hairline textures, possibly at the limits of human perception.

Monitor #2 has only 33 pixels per inch, or a little over 1000 pixels in an entire square inch. Monitor #1, meanwhile, has 100 pixels per inch, which is 10000 per square inch. Nine times as much detail!

If you want to see how a hypothetical screenshot would look, see Monitor #1 and Monitor #2.

Some other numbers: Most monitors today are around 100 ppi. Laptop screens might be a bit more high-detail, at 120 ppi or so. At 280 ppi, you’re nearing the edge of human sight. Some people can see more, and others less. The iPhone 4’s screen is about 320 ppi.

So, now that you’ve seen the difference of high vs. low, you’re probably wondering what it all means.
When you look at the example above, you see how the text went from nearly-illegible to crisp and neat. You can probably still see pixels, though, if you looked hard at those letters. In the near future, monitors and screens will all be nearing 300ppi, and those letters will look beautiful. We’ll also have more design options than ‘no line’, ‘thin line’, and ‘thick line’.

Here’s the thing: There is little support for high-density devices.
Windows, the most popular operating system, has only the barest functionality, and is only truly usable on screens with height of at least 720 pixels per hundred ppi (720 for 100 ppi; 1440 for 200 ppi). (Rough numbers, of course.)
Most web-pages automatically set your text to something like 12 or 16 pixels, which is too small to read on a 300ppi screen (think of reading 5px font on your current screen). They also usually set elements of the page to specific pixel widths, which means the proportions will be all wrong and the text will overflow from their boxes.

We need to call on web designers to design for the multitude of screens we have, and to put the power into the browser’s hands. Front-end developers need to work with designers to make their layouts flexible.

Typographic Masturbation

Saturday, July 31st, 2010

I’ve sometimes said I’m sick with Typography. When I look at type too much, I get that feeling like I’m just doing it too much and it’s working me instead of me working it. Typographic masturbation, is what it is. You just can’t do that too often.

When I was going to the Fringe Festival with my younger brother, he had pointed out a sign somewhere, and I was dissecting the typeface. I think it must have been Clarendon. Then he smacked me, and I realized that the sign was printed in English, and that it was telling me something. It’s like my mind has narrowed to three or four topics: I’ll keep an eye out for typography, logos, and design, and I’ll completely miss all the other stuff around me.
So yes, a return to basics is necessary.

When walking up to the side door of my brother’s house, I noticed a “USE THE SIDE DOOR” note by the front porch, out of the corner of my eye, and knew instantly that it was set in Calibri. The first thing I said to my brother, when I walked in, was to ask if he had recently purchased Microsoft Office 2007.

Yes; he had.

Typographically, it was like blowing my nose and then staring at the damp tissue. I’m an embarrassment to myself.


Tuesday, December 8th, 2009

A few months ago, someone mentioned that they looked at a Wendy’s ad and wondered why they used Verdana (or some other typeface; I can’t remember). The idea of someone identifying a typeface and attaching cultural significance to it astounded me, and set in motion a terrifying journey to the heart of Type.
I carry around with me a selection of specimens from every major typeface I can get my hands on. I’ve spent hours, in the past two or three months, looking at the curves and details in each letter.

One thing I’m missing, though, is cultural significance. What does it mean that they used this or that typeface? Someone might use Arial on signage because they can’t afford Helvetica; meanwhile, Verdana is a web font, and looks best on a screen—it’s not to be used on large, printed material.

I’ve only got what I could absorb through osmosis, for now, but there are resources online. I’ve been reading Typedia, which holds a great deal of information. It’s a fairly new site, but more fontastic information is being submitted every day.

Typography Mug

Saturday, October 10th, 2009