New to Typophile? Accounts are free, and easy to set up.
Typography on the web
Posted by mikefats in
19 Nov 2006 — 10:55am
19 Nov 2006 — 10:55am
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?
User login
Support our Sponsors
19 Nov 2006 — 12:12pm
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
19 Nov 2006 — 12:13pm
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
20 Nov 2006 — 6:50am
"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)
20 Nov 2006 — 8:47am
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)
20 Nov 2006 — 8:48am
Simon, you don't have to scroll vertically though. :-)
hhp
20 Nov 2006 — 9:25am
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
20 Nov 2006 — 9:42am
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)
20 Nov 2006 — 10:21am
I meant horizontal. :-)
Superior to vertical scrolling in a number of ways.
hhp
20 Nov 2006 — 11:21am
"Superior to vertical scrolling in a number of ways."
And, alas, inferior in many more... ;o)
20 Nov 2006 — 11:28am
The inferiorities of horizontality come from lousy software: easy to fix.
Its superiorities come from our DNA; don't try adjusting your retina.
hhp
20 Nov 2006 — 1:45pm
"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?
20 Nov 2006 — 2:32pm
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
20 Nov 2006 — 5:03pm
I'm with Hrant, this will turn the whole Web paradigm on it's side. :-)
21 Nov 2006 — 4:46am
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
21 Nov 2006 — 5:46am
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/
21 Nov 2006 — 7:40am
Stephen, it's bad form to hijack a thread like this - consider starting a new one.
22 Nov 2006 — 11:04am
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.
22 Nov 2006 — 11:06am
"Second question, how did you people get to be so knowledgeable ?"
Why would you think we were knowledgeable? We're opinionated. Big difference. ;o)
22 Nov 2006 — 11:16am
> 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
22 Nov 2006 — 1:45pm
"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.
22 Nov 2006 — 2:32pm
> 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
22 Nov 2006 — 2:37pm
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."
22 Nov 2006 — 3:20pm
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.
22 Nov 2006 — 4:28pm
The "effort cost" of scrolling and recovering your location
is greater than for saccading to a new column.
hhp
19 Mar 2007 — 8:37pm
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