Responsive Typography

http://informationarchitects.net/blog/responsive-typography/

by maguay • 14 years ago

122 40 14 years ago

cabirum• 14 years ago

That's just wrong. Pick a font more or less suitable for all the devices and use it. New ipads and iphones will be out in a year, then what? Throw in another couple of fonts? Any project larger than one-page personal blog is destined to turn into nightmare.

Also, add some fonts for android devices, why not? Pentile displays should get their optimized fonts as well.

nicholassmith2• 14 years ago

This is no criticism, but for an article on responsive type/design seeing the page being slightly off in terms of fluidity made me smile. Try resizing the article down as narrowly as you can, for me it brought up horizontal scroll bars.

EDIT: I think the 'most people can't...' is off slightly because good vs bad is purely a personal, instinctive thing. Everyone can feel a typeface that they like, and what works for them, but there's an entire collective of people who genuinely think Comic Sans is the perfect font for pretty much everything. Which for them it is, same as the lovers of Helvetica and so.

batista• 14 years ago

>This is no criticism, but for an article on responsive type/design seeing the page being slightly off in terms of fluidity made me smile. Try resizing the article down as narrowly as you can, for me it brought up horizontal scroll bars.

As it should. Adaptive page design is about adapting to different screens, and their design works from an iPhone to a 27" Mac.

It's not about never showing scrollbars when you make the screen narrower than the intended width.

Really, what should they do, show a one-word, long narrow column of text to avoid showing scrollbars?

nicholassmith2• 14 years ago

Good criticism, maybe I was unfair but resizing a browser pane to the width of a mobile device brought up scrollbars which was unexpected.

adeelk2• 14 years ago

> I think the 'most people can't...' is off slightly because good vs bad is purely a personal, instinctive thing.

Typography is not subjective. That non-experts are unable to distinguish between good and bad typography is simply a consequence of the fact that “incompetent people are inherently unable to judge the competence of other people” [1].

[1] http://news.yahoo.com/people-arent-smart-enough-democracy-fl...

mortenjorck2• 14 years ago

I have an awed respect for iA's unrelenting attention to detail here, but ultimately, I believe it shouldn't be the responsibility of the type designer to grade typefaces to different display contexts.

This is a runtime problem. Designers need more control over the antialiasing algorithms used by the output medium.

globalroundness3• 14 years ago

And in the mean time, designers take theses things in their own hands...

globalroundness3• 14 years ago

And in the mean time, designers take theses things into their own hands...

kijin2• 14 years ago

I don't think it's that simple.

Check out any high-quality font recently released by Adobe, like Garamond Premier Pro. It comes in different "optical sizes", one for small print, one for slightly larger print, one for regular body text, one for large display sizes, etc. This is in addition to light, regular, semibold, and bold weights for each optical size. Type designers have been doing this since 500 years ago, and digital types are just beginning to catch up. You can't have one font that looks exactly the same in all media, all antialiasing algorithms, and all sizes and resolutions.

Most people don't even notice, but serious type designers care about these subtle differences. Besides, antialiasing alone won't solve this problem as long as screens vary greatly in pixels per inch. No matter how good your antialiasing algorithm is, text at 96ppi is going to look different from the same text at 326ppi. Just like text printed on coarse paper will look different from text printed on glossy paper.

mortenjorck2• 14 years ago

Optical size variants (the size at which the text appears in your field of view, and its size relative to other type in a layout) are different from DPI variants or paper coarseness variants, though.

Paper coarseness variants will generally be designed around the physics of ink, to trap it in the junctions of small letterforms and prevent ink bleeding. Optical sizes tend to be more about the relationship between headline and body, with things like tighter standard kerning, taller x-heights, and so on. A DPI variant should only concern itself with aliasing, and aliasing is a render-time issue. You can design a typeface to counter this from the foundry side, but a more sustainable solution would be to counter it from the software side.

fusiongyro3• 14 years ago

I think we may have too many senses for the word "design" floating around because this remark reads like an oxymoron: "This is not a design deficiency of the typeface. It was simply not designed to work as body text for big body text sizes and dense screens."

I like the idea of "grades" because it seems abstracted somewhat from the device's details, but the fact that Retina displays are different in portrait and landscape mode is worrisome. I wonder how this concept is going to scale as new devices with weirder resolutions come out.

globalroundness3• 14 years ago

It's not just Retina horizontal and vertical. It's high and low pixel density, grey scale rendering, clear type.... etc etc

ajross• 14 years ago

Also which subpixel arrangement is in use. And ambient lighting conditions. And (and this is a big one that no one seems to talk about) reading distance.

The choices they posit, for precisely the same LCD panel are going to change depending on whether it's held in the hand at 20cm or stuck to the dashboard of a car 70cm away.

Basically, I don't think this is solvable. It's cute, and within reason (e.g. for an application designed to read prose text on a known set of devices) maybe it's worthwhile. But the problem is just too hard for a general solution.

sp3322• 14 years ago

"This is not a design deficiency of the typeface. It was simply not designed to work as an end table."

fusiongyro3• 14 years ago

I think the two senses of "design" are confusing the issue. If he's absolving the typographer for not accounting for retina displays, fine, but it sounds to me like he's absolving the typographer for making a poor decision with an after-the-fact assertion that it was intentional. I don't think intending for something to suck is an adequate excuse.

chj2• 14 years ago

Love the website design.

I really appreciate their attention to details. iA writer is a good example. Simple and flawless, however, I cannot recommend it to hackers since the functionalities are quite limited. Sometimes I use it for taking quick notes and that is it.

slantyyz• 14 years ago

>> Simple and flawless, however, I cannot recommend it to hackers since the functionalities are quite limited. Sometimes I use it for taking quick notes and that is it.

The "flawless" sounds a bit contradictory seeing how you follow up the statement with some arguable flaws.

I've always thought iA writer's simplicity was a gimmick. The whole notion of "distraction free writing" as a quick cure for the user's inability to focus is a hard promise to deliver on.

chj2• 14 years ago

well, I do not count missing features as flaws. what I mean by flawless is that iA writer does well on what it is supposed to do.

adeelk2• 14 years ago

> I cannot recommend it to hackers since the functionalities are quite limited.

Come on, iA Writer is not competing with Emacs.

kibwen• 14 years ago

I realize how bizarre this must sound, but my first reaction upon visiting that page was that the font was just too large to read comfortably. It only takes a quick ^- ^- to remedy, but it's an amusing counterpoint to all the recent frustrations with sites that insist on using 10pt fonts.

voyou2• 14 years ago

Yeah, I've noticed this on a couple of sites too, particularly the default Octopress theme which (like this site) sets the text size on the body to a bit over 1em, and I don't understand why anyone would do this; what platforms are they developing for, where the default font size is too small? Obviously, better to have the fonts too large than too small, though.

ricardobeat2• 14 years ago

You are just used to very small type.

http://informationarchitects.jp/blog/100e2r/

nfomon• 14 years ago

That "N minutes left" div popup is so annoying that I stopped reading the article.

kickingvegas• 14 years ago

An old saw on the topic of scan conversion in computer graphics, but I'll reiterate. The computer industry needs to use conventions that render graphics using physical dimensions. A 12pt typeface should be the same physical size regardless of the size and dpi of the display.

I refuse to believe the horse is out of the barn on this one.

callmevlad• 14 years ago

"... they look too bold on high resolution screens (MacBook Air) and they look okay on Retina displays (next MacBook Pro)"

I wonder if this is assumption based on rumors and extrapolating iPad 3 display behavior, or these guys actually got their hands on the next-gen MacBook Pro.

generateui• 14 years ago

A typographer, talking about screen density, and clarity on his blog using a serif font. Oh, the irony.

ikwm• 14 years ago

Empirical results are ambiguous, mostly pointing in the direction that there is no difference in readability between serif and sans serif fonts – and those are often very old studies, done on very old hardware with very low resolutions.

As should be obvious from the Website, iA are also huge fans of and advocates for large font sizes, in this case their body text is over 20 pixels in size. Any aesthetic issues (smushed and blurry serifs) are not really a problem at that size. 10 pixel Times might look ugly (even though it might be as readable as 10 pixel Arial) – its details a blurry mess – but if there are more pixels to work with that’s no problem – especially not with that many more pixels.

Looking at the font, it’s also obvious that it’s supposed to work at the still relatively common low resolutions of, say, laptop screens. Its shapes are relatively simple, the amount of detail is relatively low. It’s only a small step up from the very simple (and also gorgeous) Georgia.

Because of the aforementioned aesthetic problems with serif fonts (blurry serifs at small sizes on low resolution displays) not using a serif font might be a good rule of thumb if you are clueless about typography, but it doesn’t make any sense to adhere to that if you actually know your way around.

And even if you are clueless there is nothing wrong with using something simple and very optimized (also beautiful) like Georgia.

epo• 14 years ago

Do you have a point to make or is is this a display of faux-superiority from someone who actually hasn't got anything to say or any way to back up their insinuations? And you don't know what irony means either.

juiceandjuice2• 14 years ago

Resolution on a laptop screen doesn't mean shit, what you need is effective pixel density and that's going to vary too much. I don't know of any browser that communicates "hey I'm a 15" screen and my resolution is AAAAxBBBB and my user sits CC" away from their screen on average" Of course with an iPhone/iPad you can do a bit more generalization but not for laptop screens.

This is the premature optimization of design.

JoelSutherland• 14 years ago

If you read the article you'll see that they're only sending their custom font to OSX. PCs get Georgia. On OSX, resolution is enough to determine pixel density at the granularity they need because of the limited number of products Apple has [1].

So they have successfully achieved their goal.

It's not a goal I would set out to achieve, but to each their own.

1. Notice that both Air models have high(ish) DPI resolutions that are unique in the history of Apple products.

juiceandjuice2• 14 years ago

Except my 15" macbook has the same resolutions as 17" macbook from 2008 and the 20" Cinema display and 20" iMac.

The current 17" macbook has the same resolution as the 23" Apple Cinema HD display and 24" iMac.

What happens to my mac mini which is running on my 23" 1920x1080 NEC Multisync? What about when I hook it up to my TV? Will it think it's the 21.5" iMac?

What about my dual monitor setup on my Macbook pro (15" 1680x1050 & 24" 1920x1080)?

What about everyone else using some variety of monitor setup with their mac?

Maybe they could try a "Optimized for viewing on Apple hardwear (and only apple hardwear) made after 20XX and at a distance XX" except for these maybe these models:" disclaimer.

tferris• 14 years ago

Responsive typography is no solution—the client side has to improve and it is improving already:

Just use -webkit-font-smoothing: antialiased (which iA totally missed in their article) and fonts look again right in Chrome and Safari

ricardobeat2• 14 years ago

Barely related: I loved the old website so much. RIP informationarchitects.jp ;(

Responsive Typography

Related Stories