Nice Web Type

Andy Budd:

As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of cruft to the process.

Cruft, indeed.

An important part of my design process now happens in the browser, and it has been extremely difficult to make myself work this way. However, as a result, I feel much closer to the ephemeral, flexible, multi-dimensional nature of the things I make. Designing for the web is like visualizing a tesseract. We build experiences by manipulating their shadows.

Martin Sutherland took photos of three Android devices side-by-side while experimenting with different viewport meta tag settings:

Wait, what? They all show a screen width of 320px? Don’t those three devices all have different screen sizes? Shouldn’t they go 240px, 320px, 480px?

He goes on to explain:

The inexpensive Samsung Galaxy Y is a great example. It has a screen width of 240px, but pretends to be 320px wide by rendering 4 CSS pixels across every 3 hardware pixels. This makes 320px-wide layouts look a bit blurry, but that’s better than breaking; many sites consider 320px as their mobile baseline (hello, iPhone), and ignore smaller viewports.

Oof. This article was exhausting for me to process, but I think Martin sums things up well by saying, basically, don’t try to adjust your design to the PPI of particular devices. Let it be.

See also, discussion between Stephanie Rieger and Scott Kellum (in reference to Scott’s A List Apart article, A Pixel Identity Crisis) about device-pixel-ratio media queries and the idea of device whitelisting.

My favorite part was Ethan’s take on design-based breakpoints:

I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of ‘320px’, ‘480px’, ‘768px’, or whatever – the web’s so much more flexible than that, and those pixels are a snapshot of the web as we know it today. Instead, we should focus on breakpoints tailored to the design we’re working on.

“Breakpoints tailored to the design” often means breakpoints that occur when clusters of typographic elements become uncomfortable (too close together, too far apart, too narrow, too wide, etc.).

Brad Frost for HTML5 Rocks:

Because screen size is an unknown, we’ll use the content itself to determine how the layout should adjust to its container.

Huzzah for em-based media queries! But, about this part:

Our related product list starts off two to a row, but increases to 3 in a row when the screen size is at least 28.75em wide (roughly the size of mobile phones in landscape mode) and then to 6 to a row when the screen size is at least 40.5em (roughly tablets in portrait mode or small desktop screens).

The key phrase Brad uses here is at least. Rough screen size numbers are good to have, just like common viewport dimensions are good to know about. But like 768 and 960, these “safe” dimensions won’t last. Changing aspects of your composition to suit these dimensions is a short-term optimization. On the other hand, the practice of responding to compositional tension as a layout flexes will never age.

Great demo, too. Don’t miss the annotations (enable them using the flag in the lower right corner, then inspect parts of the composition for more details).

David Storey:

The vh unit stands for viewport height, vw for viewport width, and vmin represents whichever of vh or vw is the shortest length.

Jeffrey Zeldman for Adobe:

Eventually traditional designers who do understand branding and communication design, and who do know the difference between Style and Design, will enter this market and displace some young designers who have never had the chance to understand the craft they practice.

That’s from a piece Jeffrey originally wrote more than a decade ago, called Style vs. Design. It’s great. I’d point to the full article, but links have gone rotten. I retyped the bit above from a printed copy I have here. Update: Style vs. Design is available in full on Adobe’s UK site. Hat tip: Rian Murnen.

These words struck a chord for me. Looking to our elders, our history, and the roots of our craft is important. Having reasons and goals is part of the job. However, web savvy – not necessarily technical web skills, but a strong understanding of the nature of design in this medium – is as important as a solid grasp of design traditions.

Which is to say two things: that to have a place in web design, traditional designers need more than tools; and, that young designers with web savvy have as much to teach as they have to learn. Those who recognize their own weaknesses, and who work toward a balanced knowledge of the craft they practice, will never be displaced.

Oliver Reichenstein has recently spoken (see Eva-Lotta Lam’s sketchnotes) and tweeted about subtle typographic adjustments he’s making to the iA website (screenshots):

The typeface [in the screenshots] is iABC, an in house production that comes in different grades depending on the resolution of the screen (aka responsive typography).

Nice Web Type readers know I think there’s more to responsive typography than type, but I’ve long felt that graded fonts would be good for the web. I look forward to studying the iA implementation.

If you’re curious about how grade adjustments can change the feel of a typeface, look no further. iA are also the folks behind iA Writer, the iOS and Mac app. Oliver posted screenshots of the app’s custom typeface, Nitti Light (used on iPad 1 and 2), for comparison with Nitti Light HD (to be used on the new Retina display iPad).

James Weiner:

The process we follow for GOV.UK begins with analysis of a need, then sketching a possible solution, whether in pencil and paper or a very rough screen mock-up in something like Illustrator or Photoshop. Once we’re convinced by the sketches we move straight onto prototyping.

Love when folks talk about design processes that have worked (or haven’t). I look forward to sharing my own thoughts on a new design process I’m trying out. It’s rooted in web standards, built up from type, flexible, and makes use of small, focused tools. I’m really enjoying it.

Lyza Gardner for Cloud Four:

The pixel-based media query @media all and (min-width:656px) still evaluates to true with the zoomed-in text and therefore creates awkwardly-wrapped nav elements.

Nice visuals, and clear reasoning in support of em-based media queries. See also Scott Jehl’s comment, some of which I have added to the units of measurement and sizing type section of our responsive typography core concepts.

Luke Wroblewski’s notes from Jon Tan’s AEA Seattle talk.