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!
Recent Comments