Design Related

Lessons in web type

A checklist to build upon when considering type for the web. This recaps my conclusions after an exercise called Mirage.

As my interest and abilities in web design are (slowly) growing, I can't help but notice how little documentation is available for the proper setting of type on the web or furthermore on computer screens in general.

I've bought a couple of books, read a fair amount of articles, and I've not found anything that could have proper perspective on what is going on today in web design: a print based designer, moving to screen outputs.

I'm no expert, in either of these areas, but I have come to realise these few things:


Gri(d)ty display

However dense —density in pixels over, say, an inch to stick with conventions— a display may be, pixels are square and the construction of the panel is optimal when pixels are placed one next to the other, row upon row. There have been many successful efforts in pixel density lately in mobile screens at first and now even in laptop displays but this grid base has always been the same. I've really considered this as an issue, because when designing text layouts I've always been preparing for print.

img2

Text looks like shit in layout programs, I'm not blaming anybody for that, but circumstances have changed now. It's ironic how we've categorised design programs as WYSIWYG when in fact, What You See Is Not What You Get And Thank God For That!

I can't ignore this gri(d)ty backdrop, it's so far from what I know in print layout.

I can't help thinking back to my photography classes and the way we measured how fine a detail lenses could make out, and then thinking of our eyes running through these letters on screens that have so many distractions, in the foreground and the background.

img1
To measure the accuracy of optics, lens makers use diagrams like this one to see how much detail the lens can separate. If this is a purely optical process, I feel that it's a nice way of thinking about the restitution of complex shapes over a pixel display.

I feel this is the reason why any well set text on websites, rarely goes under the 20px mark (rude translations make that to be around the 15pt we know in print). Web type needs to adapt to poorer resolution, so we make the shapes bigger.

These examples seem to validate part of what I'm saying:

img1
from the new Guardian blog
img1
Explore Create Repeat
img1
Medium
img1
informationArchitects
img1
Brent Jackson

Serif finesse

We look for fluidity, tension, contrast in type design. Type designers have great pride in their characters, and the resulting families. It's all fine well when you're designing a letter shape in your glyph editor zoomed up to 800% to get that curve just perfect, then print it out. But if it's destined to be seen in 12pt (well that's never going to work but stay with me a sec) on any screen, it's an entirely different field, you're designing favicons, not letters...

img1
these are obviously exaggerations but they mean to show what kind of font will work well under the matrix pressure

It's near impossible to get the same finesse we're used to in print. Never in body text. If serifs on a letter-shape have not been designed to be shrunk down to a bare minimum, they get destroyed. Some fonts are fine, even positively good, but you can't just throw any old font you like at the screen and leave it as is.

img2
Font hinting definitively helps, but type designers rarely go as far as this when finishing their typefaces. Some of this process could be compensated by [http://www.freetype.org/ttfautohint](ttfautohint) This image and the next should give you a fair idea of what hinting actually is. Knowing the letter will be squased into a grid, maybe we can help it along.
img2
This image, compared to the previous shows the automatic hints that will be in place if the letter was to be reduced to such a low density grid.

Also, considering the smooth slants that italics usually have, thinking about what a grid display does to them breaking they backbones physically hurts. Again, I'm sure there are a few that can deal with it, no bother, but most italics won't.


Brightness & Contrast

One of the other factors I had forgotten to consider for a while was just how bright our screens actually are these days. I like a bright well lit uniform mat screen, but considering what that does to my eyes when making out text, I wonder...

Technically, on a RGB display, I think it's fair to say that we can state that the color white is fully on, and the color black is (supposedly) fully off. Right. It would be the same for a data projector, and that is just how the RGB system works. When my eye slides over these letters, it picks up contrast. Like reading on paper, we make out the different shapes in each letter and each word more from the surrounding whites than the stemmed black. But so if my eyes are being bombarded with super bright white from 95% of the screen, it's not going to be very comfortable or even easy to see the black stems of the text. Like a stroboscopic effect. Rabbit in the headlights.

img2

This might seem obvious, but it took me a while to get to this; maybe a light grey background is nicer for my eyes, and maybe a denser grey is also better for legibility, rather than: WHITEWHITE/BLACK/WHITEWHITEWHITE /BLACK/WHITEWHITEWHITEWHITEWHITEWHITE WHITEWHITE/BLACK/WHITEWHITEWHITE.


Liquidity

This is probably the most talked about topic at the moment in web design. The way a text adapts to its environment, and how the design considers multiple scenarios for the user the be as comfortable as possible, whatever he's she's reading on.

I think this is something that print designers have a lot of trouble managing, and even though it's been talked about a lot, we've not resolved much. Most responsive layouts work in the same way, and I'm curious to see in the next years what people will come up with.

img2
I'm sure you've seen a ton of these types of adaptations by now, but the reason I'm keeping it in is because I've been stating to think of print as a viewport. In an ideal world, could we not manage content and it's structure in markup and then think about where it needs to be set?

I've given this a few tries on the main page, and on these article pages, but I'm definitely not there yet. I said it at the start, I'm no expert!


The environment

It's great to have so many possibilities in actual design options on the web. Really it's pretty much limitless in terms of ideas, but there is this frame we forget about: On this browser I've got a handful of tabs open, Google offering to translate this page for me, a URL bar with some functions, a laying down traffic light, and some status on my latest downloaded file. Above that I've got an other menu telling me things about the program I'm running, and what this computer is up to. And do you know what there's more again, a big grey line underneath the screen with a big black logo in the middle of this.

img2
I like to call this process sterilisation. Starting off by making space for the content that needs to be displayed with big margins, clearly distinguishing where the computer ends and where the website begins.

I might be trying to make this text as easy as possible for you to read, but it's a battle I'm loosing! Even F11 full screen is not much use.

I thought that 'considering the environments' on the web had to do with operating systems, browsers and screen sizes. It's a bit more than that it seems...


Vertical rhythm

I have not worked all of this out yet, but overall, as we can't control the size of the page we're working with, we have to work with the rhythms that we can control... The ones I get the most satisfaction out of are the vertical ones.

img2
This recomposes an article from the work that works website. This is a fantastic example of how vertical rythm can keep you going though a long article. The alteration of one type of text for an other, mixed in with regular, wide images works great for me.

Line width >> Column size

I have yet to work out the line width to column size rapport, but I'm reading a lot about it.

I guess I'll finish with a bunch of links to my sources and readings, and I'll have to come back to this article later...

img1
This is probably the obvious starting point when turning to the web, but I have had to explain (to teachers) why it was a bad idea to try and mimic multi column layouts from the print world.

Fluid Type
Responsive Typography — the basics
Responsive Web Design
Pixel Fitting
Ttfautohint
Readying for Reading


an instance of the applications of this item list was for a student project called Mirage.

Comments?

Return to posts listing