Responsive Typography
informationarchitects.net
informationarchitects.net
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.
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?
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.
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...
This is a runtime problem. Designers need more control over the antialiasing algorithms used by the output medium.
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.
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.
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.
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.
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.
This is the premature optimization of design.
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.
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.
I refuse to believe the horse is out of the barn on this one.
Also, add some fonts for android devices, why not? Pentile displays should get their optimized fonts as well.
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.
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.
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.
Come on, iA Writer is not competing with Emacs.
Just use -webkit-font-smoothing: antialiased (which iA totally missed in their article) and fonts look again right in Chrome and Safari
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.