In the past six months or so, all but one of my layouts for Skyefairy have been rid of images. For the first three or four years of my designing experience, I focused on images and their beauty. How to make a layout header that looked good. In my fourth to fifth year, I focused more on coding: semantics of HTML and CSS to make things look organized. But I still lacked something. I had image beauty, but I lacked text beauty.
Let me explain. Sure, my page was organized. Everything had its place and fit together in a natural way. But something about the way my text sat irked me. And I couldn’t put my finger on what it was. I started to focus more on the text and anything but plain color made my layouts feel dirty for some reason. I wanted something cleaner. In essence, I wanted my text–my content–to look good by itself even if there were no images.
Consider the following sites: Intoxicated Designs, The Fanlistings, Synesthesia, Fractured Sanity, Web Designer Wall, and Junk&Trash. (This most definitely is not a complete list; just a quick one made in a few minutes.) They all have varying degrees of imaging and graphic weight, but what I want you to focus on is the text itself. The content. What do you notice?
What I notice is that I feel comfortable, relaxed. The text is readable. The text has space; it isn’t crowded. It is appealing. But how does one achieve this?
Font Size
Is your site’s text large enough to read? It varies font to font but I usually stick with 12 pixels for your average text. (I know, I know, the values of font size in percentages for user adjustability; I’m not there yet.) What about your headers? Are they too big so that the text carries onto multiple lines if your header is too long? Are they too small so that a visitor cannot tell the difference between the header and the text? Is there adequate space between the header and the text?
Line Height
How much space is there between your rows of text? If you don’t set it, the default is that the line height is the same as the font size, meaning there is minimal space and your text is most likely too close together, creating a cluttered feel. Most people say that 150% (or your font size + (your font size divided by two)) should be the standard (for example, if your font size is 12px, 150% would be 12 + 6 = 18px line height). Most feel that 200% (or double spaced; your font size multiplied by two) is too much space. Personally, I feel more comfortable in the middle at about 175%. I give my text room to breathe.
Fonts
Fonts can be beautiful, even if they are the default ones that every computer has. I’m not talking the fancy ones you have to download from DaFont. I personally have a fondness for Verdana, Times New Roman, Georgia, and Century Gothic. Knowing your fonts and using them wisely can add so much to text beauty.
Contrast
Is your text viewable on top of your background color? There needs to be enough contrast so that your text can be seen. It doesn’t have to be as drastic as black text on white background, but text can’t be beautiful if you can’t see it!
What about your text in relation to each other? Do you use the same color/shade for all of your text? Liven it up a little! Try using varying colors or degrees of strength to add depth and contrast.
Padding & Margin
You don’t want each section of your layout bumping up against each other. Space things out using padding and margin so everything has its own space. You don’t want a cluttered design!
And so much more…!
There’s so much more to consider. Do you want your headers to be all caps or all lowercase? Do you want them bold, italicized, etc. Do you want to indent things?
Experiment, learn, and grow!
June 22nd, 2008 at 11:22 am
sometimes, i actually cut off text- make line heights very small for some headers because it’s kind of stylish:
http://www.relentless-designs.net/layouts/56/index.htm
it’s still quite readable, but the cut-offness of it is stylish to me. i also usually color the middle of my text something else like on my blog for effect.
to have a fantastic graphic and bland bodies, not just text, but bland CSS, ugly tables, and headers that fail to stand out, is a shame to your layout.
July 3rd, 2008 at 2:57 pm
I like going crazy for headers, and then just sticking to verdana, arial or tahoma for font. I prefer verdana though. Century Gothic or arial narrow or arial make god headers. I actually find using similiar fonts for paragraphs and headings works the best though.
Like you I’m also trying to concentrate on an imageless layout with good coding. I want me text to be readable, or relaxed as you put it.
July 4th, 2008 at 2:32 pm
Haha, I never quite considered myself to be very good at fonts, even if I loved them to death. So, I guess having IntoxD. listed kind of came as a shock to me.
Anyway, I used to believe that the fonts for my headers and my content had to be different. If my content was sans-serif font, my headers had to be serif. I’m not too sure why, but I decided to change that with the current IntoxD layout.
I believe that even though fonts such as Arial/Arial Narrow/Bold, Times New Roman, Georgia, Tahoma, Verdana, Trebuchet MS and so forth are quite, would you say, “common” fonts and possibly boring, if used in the correct fashion, they look even better than all of the fancy script or grunge or whatever fonts available out there.
My current font obsession is mostly within the sans-serif font family. I’m a fanatic of Lane - Narrow, LaineDays, Arial Narrow and AvantGrade. Those are some of the most beautiful and thin sans-serif fonts. *dies*
Anyway, I do believe that line heights SHOULD be widened, especially if the site is quite text based (blogs, updates, etc). I recommend 20 pixels in height, for the most part (and 12 pixels in font size to make it more easily readable for blind people like me), but 18 pixels in line height is all right too.
In terms of font sizes, I think content wise, 10px or less is definitely too small and 14px is somewhat too big (for a mostly text based site). Any header over 28px in size somewhat offends me. Yes, I’m blind, but I don’t particularly need a font that large just so I can see too. Perhaps it’s just me though (taking things offensively like that I mean).
I don’t know. But, I do know that in many cases, fonts can take or break a design. Everything else on the design might be simply splendid, but if the fonts just don’t go, I definitely wouldn’t come back for round two. Oh, and I definitely urge people to PLEASE consider the fact that the fonts they use (without images) should be the more basic and general ones. I’ve seen people define font families with fonts such as “Redensek”, “Birth of a Hero” and so forth (in which, I typically have the font on my computer as I have over 100MB of fonts) but to the general public, the fonts turn out hideously, especially if no alternate font is defined.
I think people really need to realize that not all viewers can see the fancy fonts and whatnot. It’s a shame really. My default font is Trebuchet MS, so whatever font someone defines that I don’t have, that’s what it looks like to me…and sometimes, that font juts doesn’t look nice (on certain designs).