
Responsive Typography - maguay
http://informationarchitects.net/blog/responsive-typography/
======
nicholassmith
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
> _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?

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

~~~
Chris_Newton
Sorry if this is a little off-topic, but I thought I’d mention it in case
anyone’s curious...

The behaviour of CSS3 media queries is a little counter-intuitive (he said,
politely) in this respect. The widths you match against in a media query
explicitly include the width of any scroll bar[1], yet in general you have no
way to control or even determine the width of such a scroll bar. That means if
you write responsive CSS to match a mobile-friendly width of _w_ pixels in a
media query and then style your content to use the entire _w_ pixel width you
might expect to have, you can wind up with a horizontal scroll bar if your
content is more than a screen long and your browser displays a vertical scroll
bar that eats into the available width.

Mobile devices typically work around this by not displaying scroll bars full-
time anyway, but if you resize a typical desktop browser window to the same
size as the screen on a mobile device, you will sometimes get surprising
results. The adjustment can be relevant if you’re designing wide layouts to
take advantage of modern widescreen laptops as well, though at those
resolutions you might be less concerned about leaving a few pixels spare in
the width to allow for a vertical scroll bar that might appear.

[1] See <http://www.w3.org/TR/css3-mediaqueries/#width>

------
mortenjorck
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.

~~~
kijin
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.

~~~
mortenjorck
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.

~~~
kijin
You're right, they're different. I was just pointing out examples where
foundaries produce variations of the same typeface to account for differences
between media.

Anyway, as long as such differences exist, I don't think we'll be able to
convince type designers to disregard them. They want their fonts to look
perfect _now_ , they're not going to wait for smartphone manufacturers to
catch up, and they already have the skills and tools to produce subtle
variations of their typefaces.

A truly sustainable solution would be for every reading device to have 300ppi+
screens so that it doesn't really matter how you shade the last subpixel.
Until we have that, leaving optimization to perfectionist type designers seems
to me like a better stopgap measure than trying to standardize on one or
another antialiasing algorithm across vastly different platforms.

Different vendors like Microsoft and Apple use antialiasing algorithms that
are not only technically different but also based on different UI paradigms.
(MS emphasizes crispness whereas Apple emphasizes preserving shapes.) Neither
is obviously superior to the other, and the choice is to some extent a matter
of taste. So it should be the designer's prerogative to decide whether to
follow either paradigm or to disregard both and enforce his own aesthetic
tastes.

------
fusiongyro
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.

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

~~~
fusiongyro
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.

~~~
sp332
Title fonts can be a lot weirder than body fonts. If tweaking it to look good
at smaller sizes made it look crappy at large sizes, that was an acceptable
tradeoff at the time.

~~~
fusiongyro
Modern fonts, particularly at least OpenType, can embed different information
for different sizes pretty easily. If this problem could be solved by using a
more modern font format and better quality fonts, that seems like a better
approach.

------
juiceandjuice
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
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.

~~~
juiceandjuice
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.

~~~
falling
Dude. Way too much pedantry. They are experimenting. If they get it right on
your screen you get a more precise rendering of the font, if they don’t you
get a slightly suboptimal rendering, but that’s the same result you'd get with
a generic font.

------
kickingvegas
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.

------
cabirum
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.

------
kibwen
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.

~~~
voyou
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.

~~~
ricardobeat
You are just used to very small type.

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

~~~
voyou
No, I'm used to 1em being a reasonable size for body text - the text at that
link says as much, but for some reason sets its own body text to 1.3 times
browser default. I don't particularly object to it, I'm just curious as to why
they think the browser default is too small.

------
callmevlad
"... 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.

------
chj
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
>> 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.

~~~
chj
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.

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

------
tferris
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

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

~~~
epo
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.

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

