Gibberations by Kiffin Gish...
Cyber-Gish | GishTeq
Gibberations RSS feed
637 entries
Friday / June 13th / 2003
Line height in CSS...

In order to learn even more about the ins and outs of Cascading Style Sheets (CSS), I purchased a great book Eric Meyer On CSS, part of the New Riders series called Mastering the Language of Web Design. I already know alot about CSS, but a good overview like this never hurts. In fact, you even pick up a couple jewels of information here and there.

Imagine the huge difference a one line change in the style sheet can make, and you will be happy beyond belief. At least that is my experience. Take my GishTeq web site for example. I admit that it looked pretty filled and the text was crammed together.

div#content p {
    text-align: justify;
    margin-top: 0px;
    line-height: 1.33em; /* I added this line */

All I did was change the line height, e.g. so that one-third of the current font size opens up between the lines. The added white space between the lines makes the act of reading easier and more enjoyable. The user's experience is improved, making my web site contents more accessible in the process.

So, you are asking yourself, how can this small change make so much difference? I will attempt to illustrate the effect by comparing two layouts.

Here is a paragraph with the default line-height equal to 1.0em:Here is a paragraph with the new-and-improved line-height equal to 1.33em:
Here is a bunch of text which is pretty much readable you could say but also at the same time gives the impression of being crammed up together and perhaps more difficult to peruse than should be absolutely necessary.
This is an example of a bunch of text which is a bit more readable because I have increased the white space appearing between the lines freeing up the text slightly thereby making the process of reading easier and more enjoyable.

Can you see the difference? Sometimes a very little bit makes all the difference in the world.

~ Posted at 09:42 AM | Technical stuff
So far there are 5 comments.

are you sure you're not just trying to make it look like your website has more content on it. I mean, that's what I do with term papers to fill them out sometimes. Next thing you know, you will be changing the margins on us too. No, really, I am starting to wonder about applying this new-found knowledge to my content as well. Thanks for the tip!
Posted by Stu D. at June 13, 2003 03:18 PM

Well it's not like I am doubling the font size and/or using double-line spacing (indeed a trick my kids use for school when writing term papers), nothing too exaggerated like that. I just wanted to apply a subtle change which makes a big difference to readability, you know, improving the so-called user's experience as they say.
Posted by Kiffin at June 13, 2003 03:24 PM

I like the new spacing, it's much easier to read!!
Posted by Pat at June 13, 2003 09:21 PM

I have a 800 pixel wide monitor. Half of the 2nd example was cut off. Normally, these pages designed for 1200 something wides can be accessed completely by just scrolling to the right to see what doesn't show. But, yes, what I can see does look more spacious. I solve the crapped look easily by just having shorter paragraphs. Easy to just put another <P> in.... Now, I realize the more pixililated screens are the wave of the future, and the 800 wides are going the way of the dinosaur, but there may be more than a few dinosaurs still out there. Joan Of the dinosaur computers and htmling skills, who will not buy new computer stuff until old stuff breaks down utterly and completely.. and who will keep on using the same ol' simple code...
Posted by Joan Lansberry at June 14, 2003 05:16 PM

ugh, 'crapped' was SUPPOSED tp read 'cramped'. Though cramped IS crapped... heh heh
Posted by Joan Lansberry at June 14, 2003 05:18 PM

Add another comment:


Email Address (optional):

URL (optional):
with "http://"

  What's this?

HTML is allowed.Spell checker?

"La perfection n'est pas de ce monde..."  - - French saying, simple but true.

In order to go back to the main blog just click on the button below.
Contact info
There are a number of ways you can get a hold of me. Pick one:

MSN: Email:
ICQ: My UIN is 101918614... 101918614
AIM: My AIM username is 'CyberGish' CyberGish

[ I use Trillian Pro ]
Subscribe to blog
Be reminded automatically with each new blog entry by entering your email here:

Powered by Bloglet
Top Referers
So far the most visitors to this blog have come from the following top twenty web sites:
(100) Splog
(65) Stuart M. Davis
(43) Sugar Fused
(28) Syaffolee
(24) Brian Kane Online
(24) C.G. Jung Page
(9) Jumping People
(8) MovableType
(8) Internet Brothers
(7) The Obvious?
(3) google.btopenworl...
(2) Girlie Matters
(1) search2.cometsyst...

Recent comments
The five most recent comments are:
"Have a safe trip, Kiffin! Enjoy your vacation - you..."
"I was in Big Sur today. The coast is SO..."
"I've been cracking every joint I can since about age..."
Joan Lansberry:
"You are lucky to be there in the Netherlands and..."
Joan Lansberry:
"Happy Belated Anniversary! Congrats on your long and happy life..."
Most comments
Readers who have commented the most are:
1. Stu D. (100)
2. Pat (88)
3. Bekah (53)
4. Emerald Sky (46)
5. Tom (32)
6. deb (23)
7. pat (21)
8. Marc (20)
9. Susan (20)
10. Brian (19)
11. Joan Lansberry (19)
12. Euan (18)
13. Alexandra (14)
14. Maman (13)
15. sugar (9)
16. sya (6)
17. David (6)
18. Nit (5)
19. Rogi (4)
20. Scott (4)
21. Ruben (4)
22. Allan (4)
23. Pat Doran (4)
24. J.D. (4)
25. Chris (3)
26. Kat (3)
27. Kat Ortland (3)
28. Scott Munger (2)
29. Ray (2)
30. Al (2)
31. Bob Cvetkovic (2)
32. Jeanine (2)
33. Michelle (2)
34. Lennart (2)
35. Scott (2)
36. The Obvious? (2)
37. Kathleen (2)
38. Gwendolyn (2)
39. marc (2)
40. Walker (2)
41. sahr (2)
42. Larry Jett (2)
43. Ricky (2)
44. KiwiNessie (2)
Random blog entry
Do not believe this
So I finally finished the (thin) book called "Freedom From The Unknown" by my spiritual hero Krishnamurti, and I must...
Last 100 posts
Blogs I reviewed
For awhile now as official weblog pseudo-analyst on the weblog review, I have written a number of reviews about the following sites:

big picnic | untamed | my november | neurosis | runnerblog | this is what orgasms look like | hustlebox | becoming | journal life | mark's weblog | macaroni | syaffolee | alt164 | cheese | people's republic of seabrook | isabella's teddy's travels | random rationale | after horizon | 168 | fuh-q dot com | twisted soul | drifting castles | one moment | neal curley dot com | reality rendered | most definitely

My weblog was also once reviewed so you might want to have a look at
kiffin's blog.

You might also want to check out the blog control site.