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.
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!
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.
I like the new spacing, it's much easier to read!!
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...
ugh, 'crapped' was SUPPOSED tp read 'cramped'.
Though cramped IS crapped...
heh heh