Typography on the web

mikefats's picture

Is anyone aware of a JavaScript library or a collection of JS/CSS code snippets that takes care of finer points of typography such as first line paragraph indents (as opposed to vertical spaces between paragraphs)?

I have not been able to find any yet, although it *seems* do-able. If it does not yet exist, I would like to try and tackle that, or suggest that the experienced coders look into it. It could, for example, become a plug-in module to the JQuery [www.jquery.com] JavaScript library.

I'm hoping we can get a list started. What sort of typographic conventions are we neglecting because they are not easily typeset on the web?

Alessandro Segalini's picture

The use of real Small Caps is one that comes to my mind but I am not expert in coding for the web, you might find these useful :

http://webtypography.net

http://typophile.com/node/28496

http://typophile.com/node/18418

Si_Daniels's picture

Given the scrolling nature of the Web I would imagine that space between paragraphs is preferable to indented paragraphs for most forms of text setting.

Indented paragraphs, like fully justified setting, is easy with CSS but few use them becasue they are less than optimal than the HTML default.

Cheers, Si

aluminum's picture

"Is anyone aware of a JavaScript library or a collection of JS/CSS code snippets that takes care of finer points of typography such as first line paragraph indents (as opposed to vertical spaces between paragraphs)?"

CSS:

p {
text-indent: 4em;
}

Also, the best way to approach web typography is to let go of the 'finer points' of control that you would normally have on paper.

"The use of real Small Caps is one that comes to my mind"

Again, CSS:

yourTag {
font-variant: small-caps
}

"Given the scrolling nature of the Web I would imagine that space between paragraphs is preferable to indented paragraphs for most forms of text setting."

I agree (though other's may not, of course). The web is often more of a 'pan and scan' medium where people are looking for excerpts vs. sitting down and reading an article from start to finish. Having the visual breaks between paragraphs makes that task a bit easier.

Whatever you do, don't indent AND have spaces between paragraphs. Way too redundant for my tastes. ;o)

mikefats's picture

Thanks for the resources, Alessandro. www.webtypography.net is particularly useful. It had a solution to my original question, too:

p + p {
text-indent: ...
}

("p + p" will intentionally ignore the first line)

hrant's picture

Simon, you don't have to scroll vertically though. :-)

hhp

Si_Daniels's picture

True, some sites required no scrolling, but now even the Trib has gone 'traditional' :-( http://www.iht.com/articles/2006/11/20/news/lego.php

aluminum's picture

This is one of those rare cases where, over time, web developers collectively came to their senses and realized the browser's own simple vertical scrolling capabilities was infinitely more user friendly than any iframe/div/javascript/sideways scrolling widget could ever be. ;o)

hrant's picture

I meant horizontal. :-)
Superior to vertical scrolling in a number of ways.

hhp

aluminum's picture

"Superior to vertical scrolling in a number of ways."

And, alas, inferior in many more... ;o)

hrant's picture

The inferiorities of horizontality come from lousy software: easy to fix.
Its superiorities come from our DNA; don't try adjusting your retina.

hhp

aluminum's picture

"The inferiorities of horizontality come from lousy software"

That and it comes from lousy hardware and what people are used to after 3+ decades of computer use.

Not to mention print tradition well before that...

I can't think of any real benefits to horizontal scrolling on a web page off the top of my head for anything even partially text based. What did you have in mind?

hrant's picture

3 decades? Yeah, 100 millennia pales in comparison. Print tradition? Ever seen a book spread? No scrolling, and at least two columns, often four. :-) Scrolling is for scrolls, and guess which way scrolls were held. Benefits on a web page? Hey, wild guess: is your screen wider than it is tall? Dude, the overall benefit is crushing.

hhp

Si_Daniels's picture

I'm with Hrant, this will turn the whole Web paradigm on it's side. :-)

stephen's picture

After all your great help last week I'm now looking for articles (not images) relating to/commenting on, 'Is typography Art or craft?'
Your own opinions also wanted.
Second question, how did you people get to be so knowledgeable ?

Thanks Stephen

Alessandro Segalini's picture

CSS Styling for Print and Other Media
by Ian Lloyd (in Articles)
November 20th, 2006

http://www.digital-web.com/articles/css_styling_for_print_and_other_media/

.

Fine Typography for the Web
Presented by Dave Shea
June 15th, 2006

http://www.mezzoblue.com/presentations/2006/@media/

Si_Daniels's picture

Stephen, it's bad form to hijack a thread like this - consider starting a new one.

aluminum's picture

Dude, screen size/resolution/orientation is not indicitave of browser viewport size/resolution/orientation.

Columns would be nice, but screens are such low resolution as it is, there's little point in pushing for it until we have digital displays pushing closer to the resolution capabilities of good ol' paper.

aluminum's picture

"Second question, how did you people get to be so knowledgeable ?"

Why would you think we were knowledgeable? We're opinionated. Big difference. ;o)

hrant's picture

> screen size/resolution/orientation is not indicitave
> of browser viewport size/resolution/orientation.

?
I assume you also drive across lanes instead of down them?

> Columns would be nice, but screens are such low resolution as it is

Well, horizontal scrolling!

hhp

aluminum's picture

"I assume you also drive across lanes instead of down them?"

The problem is that you are assuming. Again, you can't assume anything about my web browser based on my screen (without standing here next to me).

It sounds like you have some preference to horizontal scrolling, which is fine and all, but most usability testing seems to indicate that people prefer vertical scrolling when it comes to web pages.

hrant's picture

> you can’t assume anything about my web browser

We can -and need to- assume all kinds of things to be able to function. Like when we're driving, we need to assume that the car next to us will NOT abruptly start driving across the lanes. But more to the point: we can confidently assume various things about the typical web browser. Like you know the DVD message that says "This movie has been modified to fit your screen"? I hate that, because they don't know what my screen is. But if they said "modified to fit the typical screen" then I wouldn't complain.

> most usability testing seems to indicate that people prefer vertical scrolling

Compared to horizontal, or compared to none?
What are the exact details of this testing?
Many tests suck.

hhp

mikefats's picture

There might be something to the horizontal scrolling argument. Maybe the resistance to (discomfort with) scrolling this way has to do with the position of the scrollbar? It could well have to do with right handedness and the vertical scroll conveniently placed to the right of the content. With a horizontal scrollbar reaching over way to the left to advance to the next column just does not feel right. Do the usability studies have any insights into why people prefer vertical / dislike horizontal scrolling?

Just a speculation, but as people get used to the trackpad and mouse wheel scrolling (I have the Apple's Mighty Mouse - unidirectional ball in mind), our natural reading habits may resurface and "turn the web on its side."

mikefats's picture

On the other hand - just reflecting on how I read on the web here - there isn't as much effort required in reading a single column as there is with navigating multiple columns.

When the text is all in one column, I read 10-15 lines, scroll down, repeat. The eye doesn't move across great distances, as it would when jumping from the bottom of one column to the top of the next.

hrant's picture

The "effort cost" of scrolling and recovering your location
is greater than for saccading to a new column.

hhp

mikefats's picture

Ok, one more thing to add...

I have come across a freeware application for OS X which lays out copied text into columns. No vertical scrolling - strictly horizontal.

Give it a try and see if it makes on-screen reading more comfortable: http://amarsagoo.info/tofu/index.shtml

Michael

Syndicate content Syndicate content