Tutorials

In my last tutorial, I explained some of the reasons behind the use of various line lengths, known as a column’s measure. I mentioned that a column’s line-spacing, or leading, plays a significant part in the choice of a line’s length. Line-spacing plays an important part in a lot of things typographically, as I’ll explain. The […]

Have you ever seen a website that has certain content on the sidebar of the home page, but a different sidebar is displayed when you’re looking at a single page? How about nice little welcome messages that go away as you venture into the site? It’s a pretty nice effect, and it’s quite simple to […]

First, design the tabs; I used Photoshop 7.0. Before any slicing, saving, or coding, here’s my tab design: In the example above, no matter what the lengths of the links are, they all sit within tabs that have the same width. That’s because I plan on coding stretchable tabs. Once my tabs are coded, they’ll adjust […]

This is the first in a series of tutorials on how to increase the readability of your web design using available typographic knowledge. As noted previously, fluid or liquid designs can aid tremendously in the design of a page. But if you’ve ever tried to follow a long discourse that someone has posted on an internet […]

How many times have you typed up a post and published it, only to wish that you could style that post just a little differently than the others? One example might be a special announcement post that maybe you wanted to highlight with a unique background color. Well, we are going to take a look […]

What do you do when height: 100% doesn’t work? The safest and easiest way to get your main column and sidebar column to match, height-wise, is to use a background image in order to hide the actual lengths of the columns. <div id=”wrapper”> <div class=”maincolumn”> content </div> <div class=”sidebar”> sidebar content </div> </div> Apply a […]