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:
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.
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.
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:
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...
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.
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.
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.
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.
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!
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.
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...
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.
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...
Responsive Typography — the basics
Responsive Web Design
Readying for Reading
an instance of the applications of this item list was for a student project called Mirage.