Body text is often an after-thought in design. We have all been guilty of this at some point in our careers. When you implement your CSS, you might simply throw a body { font-family: blah, blah blah; } into the CSS, and after that you move on. You’ve probably figured out the whole base font size thing too, which can help, but there’s so much more you can do. Let’s look at a number of things to help your body type become something a bit more visually appealing and readable.

Text Color

Hopefully you’ve already figured this one out, but I dare not exclude it for the sake of accuracy. Probably the single most important thing you can do to your body text is change both the color of the text as well as the background color of the area shown behind the text. Here’s a few pointers:

• Readers generally prefer dark text on a light background. There are a few impressive exceptions to this rule, but for the most part, it’s best to stick with the old “dark on light” tried-and-true formula.
• While contrast is important, don’t take it too far. Black text (#000000) on a white background (#ffffff) is perhaps a bit too much contrast. Opting for a slightly lighter shade of text can make it easier on your readers’ eyes. If I’m working on a white background, I generally choose a font color that is at or in the general vicinity of #666666 (don’t be afraid to add a subtle hue of color too, but keep it dark).
• Add some variety by slightly changing the color of elements in your body text like darker <strong> text or lighter <li> items. You don’t have to stick with a single color for all text in the entire design.
• Keep the focus on your article or body text. If you have a sidebar or widgets that appear to the side of your actual body text, try lightening their text color (or reducing contrast with a different background color) to make sure that users focus on the real content of the page.

Font Size

Another obvious and quite important element of your body text style is the font size. There are a number of different ways to establish a default font size for your text. While the method of setting your font sizes is a matter of debate, there are a few best practices you should be aware of.

• It’s easiest on your users to set the body font size at 62.5%, and use ems to size your fonts from there (.wrapper { font-size: 1.3em; } would set the font size to 13 pixels in height).
• Choose a base font size of at least 12 pixels in height. There are exceptions to every rule, but you’ll find that users are frustrated by tiny font sizes, and are apt to leave a site even before using the handy browser zoom feature.
• Deviate from the base font size only where it makes sense in the overall theme of the design. Consistency is key. Set default CSS styles for things like the <small> tag and headers.

Font Family

Fonts are a bit tricky in web design, basically because you’re forced to choose one of about ten fonts that are used on every other website in the world. Typekit is great for header text, but you’re better off using regular web-friendly fonts for your body text. Here’s a few pointers:

• Serif vs. Sans-Serif: First choose the font style you’ll be working with. Choose something that fits with your design’s overall theme or concept. Serif fonts like Times and Georgia give your site a vintage and book-like feel. They are flowing, artistic, and regal in theme. Sans-serif fonts like Arial or Helvetica can be used to portray a clean, professional, and strong atmosphere in your design.
• Choose a common font for your body text that is available on both Mac and PC platforms. There are some great fonts on the Mac, but you’ll want to design your site so that it looks good no matter what device is accessing it.
• It’s completely acceptable to add a “nice to have” font into your design, such as Helvetica or Myriad Pro. These fonts can gracefully degrade to Arial without jarring the layout of your page too much.
• Georgia and Times are not the only serif fonts available! Try experimenting with fonts like Book Antiqua or Platino Linotype, which have a more book-like and artistic feel.
• Courier New is a great fixed-width font best used for displaying CSS, HTML, or some kind of code to your readers.
• Don’t forget other elements in your design! By default, text boxes, buttons, and select menus will not use the body font family and/or size, so make sure to set a consistent font on all elements in your design.
• Don’t use Comic Sans.

Margin, Spacing, and Line Height

This is probably the most overlooked element of body type design. After you’ve developed the character design of your body type, take a step back and examine the paragraph style.

• Unless you specify otherwise, the lines of text in your design are drawn very close together, and it can be difficult for readers to follow as they read down the page. Add a bit of CSS such as p { line-height: 1.5em; } to make this text easier on the eyes.
• Likewise, paragraphs of text have default margins applied to them that may make them appear too close together or too far away from the headers that appear above them. Try adding some CSS such as p { margin: 0 0 1.5em 0; } to standardize the spacing around paragraphs.
• Paragraph text is not the only thing you’ll see in a page. Don’t forget to style other HTML elements like lists (<ul> or <ol>), the horizontal rule (<hr />), and block quotes or call-out boxes.

Be Creative

Following these rules isn’t a guaranteed way to make your body type look amazing, and breaking any or all of these rules certainly doesn’t guarantee that your design will be ugly and fail. In the end, it’s all about being creative and paying attention to all the tiny details that go into making a website look amazing. The difference between a good design and a bad one can be very subtle. Create something fun, stick to a theme, and take note of every visual detail that appears on the page, body type included.

Concerning Accessibility

Accessibility is chiefly important for a web designer (or at least, it should be). When you create your HTML, keep things as simple as possible. Assume that every single user who visits your site will (1) not have CSS support, (2) will disable all images on your page, and (3) will not have JavaScript enabled. If you design your HTML in this fashion, you’ll find that creating accessible content is much easier to do. Once you have an accessible document that works on all systems, you can use the fantastic features of CSS and client-side scripting to really bring your site to life. These “nice to have” features (style, scripting, etc.) are not essential to the structure of your document or the content that’s contained within. When it comes down to it, users are after your content, so that’s priority number one.

A Simple Example

With that in mind, let’s say we wanted to create an image that links to another page (this is so very simple, but it serves as a great example of this technique). Because we’re assuming that users have disabled all images, we certainly don’t want to use the <img/> tag for our link, because those users without image support simply won’t see it. For that reason, our link will look like any other link on the site.

<a class="learnGuitar" href="http://www.mahalo.com/how-to-play-guitar-for-newbies">Learn Guitar</a>

I know…this is really simple, but stay with me; I promise we’re going somewhere with this. Our very simple HTML has passed our criteria: users with CSS disabled will see the link, as will users without images or script. It’s very simply an accessible link on our page, read as easily by normal users as it is by search engines or even people using screen readers. Next, for users who can utilize our “nice to have” features, we’ll add a bit of CSS to make our image appear.

.learnGuitar {
	display: block;
	width: 200px;
	height: 50px;
	background: url('/path/to/learn-guitar.png');
	text-indent: -9999em;
}

As you can see, we’re using the text-indent CSS property to bump our text out of the way, and in it’s place, we’re using background to set an image for our link. All you have to do for your own image is adjust the width, height, and background URL to match. What you get when you’re all done is this:

Learn Guitar

Adding a Hover Image

Easy and accessible CSS image replacement! It looks great, but let’s take it one more level to really make sure users know that our button DESERVES to be clicked. Let’s add a hover style. I’m going to use an image “sprite” for the hover image, which means that both our static and hover states are contained within the same image. Here’s my *single* image that’s used for this type of style:

We’ll adjust our CSS to account for our new hover image. Note that the height and width attributes will not change! The hover-state image will be “clipped,” so that it’s only visible when users move their mouse cursor over our image button.

.learnGuitar {
	display: block;
	width: 200px;
	height: 50px;
	background: url('/path/to/learn-guitar.png') top;
	text-indent: -9999em;
}
.learnGuitar:hover {
	background-position: 0 -50px;
}

Now, when users move their mouse cursor over our image button, the CSS will “slide” the background image so that the hover state is displayed instead of the static state.

Learn Guitar

Crafting your image buttons in this fashion can really save on performance and download times. Perhaps more importantly, your site will be much more “friendly” to visually impaired users using screen readers, and you’ll find that search engines will have an easier time understanding what your links and other content are all about.

Let me know if you have any questions or comments!

Rounded corners are all the rage; they have been for some time now. There are pure CSS approaches to implementing this type of design, but occasionally your clients demand that your user experience be consistent across all browsers. Whether it’s time to stop using HTML and images for rounded corners is still a matter of debate. Nonetheless, I think every designer finds themselves doing this from time to time.

Say No to Images

I’ve found that many designs contain various types of rounded box styles on the same page. In my previous tutorial, this would demand that you create a separate corner image for each style of box. If you have a box with a red background, you’ll need to create a corner image with red corners. That makes sense from a visual perspective. From a data perspective, however, it’s not the best approach. If you think about it, the only thing you’re really “downloading” when you download a corner image is the curvature of your box’s edge. Wouldn’t it be better if we could somehow reuse that data on every box style everywhere else in your design?

Well, you can! How gloriously fantastic! Well…don’t get all excited just yet. There are a few limitations to this. This will only work when your rounded box appears on a solid color. For instance, the text you’re reading right now is on a solid white background. We can easily add rounded boxes to this page because of the solid color. This doesn’t really work if your background is an image or a gradient color.

Meet the Sprite

So, you have a solid background color, and you’re ready to add some rounded corner boxes to your page. The only really important thing here is your corners image. In Photoshop or an image editing software of your choice, create a square image. Basically, your image is all four box corners stuck together, so make it symmetrical. Fill your image with the background color of your page, and then delete a circle out of the middle of the square. It’s that easy! Here’s what it should look like when you’re done:

In case you’re not Photoshop-savvy, I have created a few templates that you can download and use.

• TransparentCorners-10.psd – 10×10 pixel corner image template
• TransparentCorners-15.psd – 15×15 pixel corner image template
• TransparentCorners-20.psd – 20×20 pixel corner image template

The Markup

Now that we have this nice fancy reusable transparent corner image, it’s time to create the HTML that will be used to house our beautiful box and its contents. Here’s the basic setup:

<div class="box red">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>This is your box content. Lorem ipsum dolor sit amet.</p>
</div>

Pretty simple, right? We have an outer “box” <div/>, a <div/> for each corner, and then our content that will appear inside the box.

The Style

Our HTML doesn’t do much by itself. Most of the work to be done is going to be done in our CSS style sheet. In an attached style sheet, add the following CSS:

.box {
	position: relative;
	padding: 1em;
}
.red {
	background: #cc0000;
	color: #fff;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url(/path/to/cornerImage.png) no-repeat;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: 100% 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 100%;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: 100% 100%;
}

As you can see, we’re really trying to keep this simple. Basically, we have an outer “box” style, a “red” style that sets the box’s background color to red, and finally individual “corner” styles that will automatically position themselves at the edges of our content, regardless of the height/width of that content. Groovy.

The Result

I’ve created a simple “white” background corner image for use on this page. What you get when you put all of this together is a very flexible corner system that requires very little HTML and CSS to implement:

And the coolest part…

It’s Reusable!

The coolest part about using transparent images for our corners is that we can apply these corners to just about anything on our page that we want to. For instance, I could create some additional box styles (other than “red”) by adding a bit of CSS.

.red {
	background: #cc0000;
	color: #fff;
}
.blue {
	background: #00cc00;
	color: #fff;
}
.green {
	background: #0000cc;
	color: #fff;
}
.gray {
	background: #dedede;
	color: #666;
}

After changing our box’s class (class="box blue", class="box green", etc.), we would get:

That’s really cool, but this doesn’t even touch the limits of how you can apply this. In addition to solid color boxes, we could also apply this to photos and gradients (which would be much harder in a more traditional corner system). Our corners really don’t care what type of content they’re applied on, they only really care about the background color. Let’s try it out on some different page elements (accompanying HTML and CSS are included for each style):

The Mini Profile

HTML:

<div class="box photo">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<h3>My Profile</h3>
	<img src="http://kyleschaeffer.com/wordpress/wp-content/uploads/2008/10/kyle.jpg" alt="Me" />
</div>

CSS:

.photo {
	width: 200px;
	padding: 0;
}
.photo h3 {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	margin: 0;
	font-size: 1em;
}

The Gradient

HTML:

<div class="box blueGradient">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>Notice the gradient background image!</p>
</div>

CSS:

.blueGradient {
	background: url(http://www.kyleschaeffer.com/wp-content/themes/life/images/sky-day.png) bottom repeat-x;
	color: #fff;
}

We’ve accomplished all of the styles you see above using a single image and some fancy CSS footwork. This really minimizes the impact of your corners on page download times, especially if you’re using a number of different styles on a single background color. No scripts, no confusing HTML, simple markup, and a single image. Happy styling.

The Idea

First of all, I will say that this approach only really works if you know the maximum size of your comment data. On ThumbSticks.com, for instance, users can’t enter comments that are over 300 characters in length, so I have a good idea of how large each comment box could possibly get. Rather than splicing my comment box into multiple images (which is more flexible, but decreases page performance and increases download times), I decided to create a single image that is used to wrap each comment chat bubble:

The Image

Basically, my chat bubble boxes can shrink to any size, but they can’t grow beyond the height of this image. If you know exactly how large your data can get, this is a really simple solution to implement. All that I need to show my chat bubbles is a bit of HTML and CSS.

The Nitty-Gritty

HTML:

<div class="bubble">
	<div class="bubbleHeader"></div>
	<div class="bubbleInner">
		<p>Lorem ipsum dolor sit amet.</p>
	</div>
</div>

CSS:

.bubble {
	width: 477px;
	background: url('/path/to/commentBg.png') no-repeat;
	background-position: 100% 100%;
}
.bubbleHeader {
	height: 20px;
	background: url('/path/to/commentBg.png') no-repeat;
	background-position: 100% 0;
}
.bubbleInner {
	padding: 0 20px 10px 37px;
}

Make sure you change “/path/to/comment.Bg.png” to reflect the actual path to the background image you’re using. Once you’ve dropped this into your design, you should see something that looks a little like this.

Good luck, and happy styling!

The truth of the matter is that a web document is a compilation of various highly organized computer languages (XML, HTML, CSS, JavaScript, etc.). The web designer has the difficult task of considering the “art” of the design as well as the technical architecture of it. A truly skilled web designer has the ability to think both creatively and logically. A designer bridges the gap between design and development, which is sometimes a very difficult task; a task made far more feasible by the utilization of simplicity.

A Simple Example

I use the word “simplicity” in a very generic sense; it’s a very broad term, so I’d like to use a few examples to show how simplicity can be a great aid in web design. Take, for instance, the anchor tag (<a/>). The anchor tag is at the very foundation of HTML; it is the most basic implementation of the concept of the internet: the hyperlink. It’s so simple in and of itself, how could designers possibly do anything at all to mar it’s glorious simplicity?

Here are two anchor tags. They appear quite identical, but the behavior of each is remarkably different. Which one is better?

A Simple Link A Simple Link

Did you notice a difference? At first glance, they are identical, but the interactive behavior of each link is quite different. Move your mouse cursor over each link, and notice the difference in clickable area on each link. On the first anchor tag, only the text “A Simple Link” is hyperlinked. The padded area around the link is not. The second link, however, is fully hyperlinked (the entire padded area is clickable).

Visual Interactivity

This is a demonstration of the fundamental elements of simplicity in design. A user who visits your site doesn’t care how you’ve formatted your CSS and HTML, or how you’ve scripted page behavior to allow for access to your data. The user only cares about navigating to the content they’re interested in. When a user sees a visual element on the page (such as the links above), they want to move their mouse pointer to that element and click. If a particular page element has some level of interactive behavior associated with it, the entire element should react to that behavior.

Logical Simplicity

Treating page elements in this fashion can also help eliminate extraneous HTML and CSS. Again, using the example above, let’s look at the source code of these two different links and examine their differences.

<style type="text/css">
.complexLink {
	display: block;
	width: 15em;
	padding: 1em 0;
	margin: 0 2em 2em 0;
	float: left;
	background: #f0f0f0;
	border: 1px #e0e0e0 solid;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	text-align: center;
}
.complexLink:hover {
	border-color: #c0c0c0;
}
.complexLink a {
	color: #555;
}
.complexLink a:hover {
	color: #d56e1c;
	text-decoration: none;
}
</style>
<span class="complexLink"><a href="...">A Simple Link</a></span>

<style type="text/css">
.simpleLink {
	display: block;
	width: 15em;
	padding: 1em 0;
	margin: 0 2em 2em 0;
	float: left;
	background: #f0f0f0;
	color: #555;
	border: 1px #e0e0e0 solid;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	text-align: center;
}
.simpleLink:hover {
	color: #d56e1c;
	border-color: #c0c0c0;
	text-decoration: none;
}
</style>
<a class="simpleLink" href="...">A Simple Link</a>

The code above relates to the first and second links, respectively. At first, the two links seemed almost identical, but now the differences are really starting to show. Not only is our more complex example (the first link) more difficult for the user to interpret, but it’s also more work for you as the designer because you have more elements, layers, and styles to deal with.

Now Repeat

It might be somewhat trivial to look at an anchor tag in such depth, but this type of design methodology extends into every aspect of web development. From HTML to CSS, from JavaScript to server-side programming, simplicity is an essential element of a good design. You’ll find that adopting this mentality can increase your productivity, lower the costs of site re-design, and expedite efforts to troubleshoot and resolve rendering problems in your web application. Less really is more.

Take a moment, take your time, and think about each and every element that you design as an independent function of logic and art. Think about the best way to approach every control, and apply uncompromising simplicity wherever possible.

Seeing is believing, so without further adieu…

View the Karate Corners Demo by clicking here.

But…why?

Why do we go through all the trouble of creating table-less designs? In short, the answer is performance. At times, it may feel easier to simply drop in a table tag and quickly split your design into columns, but that’s not always the best option. Tables create a large amount of extraneous HTML that can make your pages slower for visitors to download. While it may not seem like a huge difference at first, when designing a template for a very large site, the difference can be astounding.

CSS that is defined in externally linked files is cached on client computers, meaning that anything you put in your external CSS files is downloaded only once. Once that CSS file is downloaded, it is quickly loaded on subsequent page visits, which is faster for your visitor and easier on your web server.

Why is this important? Stay with me, we’re getting there!

Generally, the content in your site changes as visitors browse from page to page, but the overall design remains the same. It is much easier (and faster) to store this persistent design information in cached files, such as images and CSS.

In a table-less column design, almost all design information is stored in cached CSS files. A design that uses tables, on the other hand, often includes some of this information directly in the HTML, forcing users to download the HTML on every page in the site. Whenever possible, site design should be done in CSS rather than in HTML; for this reason, table-less designs are the modern preferred standard in web design.

Floating Columns

The float attribute in CSS is very powerful. So powerful, in fact, that many people seem to shy away from using it. Don’t be afraid! A bad float can ruin any good design, but using them when appropriate will alleviate your HTML-table woes.

The HTML:

<div class="columns">
    <div class="left">
        <p><strong>This is left-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right">
        <p><strong>This is right-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="bottom"></div>
</div>

The CSS:

.left {
	width: 60%;
	float: left;
	padding: 0 2% 0 0;
}
.right {
	width: 35%;
	float: left;
	padding: 0 0 0 2%;
}
.bottom {
	clear: both;
}

The Result:

Advantages:
Fluid width – allows for dynamic width (resizing)
Fluid height – matches the height of the tallest column, allowing for fully dynamic height of all columns

Disadvantages:
Floating – if you are using fixed-width columns, and if the content in a column is too wide, your columns will word-wrap within your design and stack on top of each other
Variable column height – background colors or images applied to columns will not match in height

Absolute Columns

In many cases, the floating column design does the trick quite amiably. If, however, for some reason you find yourself in a situation where you are using a fixed-width design, and you really can’t control the width of content in your site, floating columns can become a nightmare. There’s nothing worse than seeing your left-hand column disappear from your layout, only to be re-positioned at the bottom of your page! If that’s the case, you may consider using the absolutely-positioned column design.

The HTML:

<div class="columns">
    <div class="left">
        <p><strong>This is left-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right">
        <p><strong>This is right-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

The CSS:

.columns {
	position: relative;
}
.left {
	width: 60%;
	margin: 0 35% 0 0;
	padding: 0 2% 0 0;
}
.right {
	position: absolute;
	top: 0;
	right: 0;
	width: 35%;
	padding: 0 0 0 2%;
}

The Result:

Advantages:
Fluid width – allows for dynamic width (resizing)
No floating – consistent even when content is too wide to display

Disadvantages:
Minimum height – the absolutely-positioned column must always be shorter in height than the fluid column(s), else it will display on top of design elements below
Variable column height – background colors or images applied to columns will not match in height

Concerning “variable column height.”

I would like to point out that “variable column height” is listed as a disadvantage of each method. The main disadvantage in using table-less CSS column designs is that when you have two elements side-by-side, they won’t necessarily match in height. If your design requires two shaded columns to match in height, this table-less approach may not be your best option. In general, it’s best to create designs that don’t require this type of approach from the get-go. Many people try to compensate for this lack of height-matching by using repeating background images that make it appear as if the columns match in height, but I have never been a fan of adding images to do something that HTML and CSS could handle otherwise.

When all else fails…

The only time I use a table in HTML is to (1) display tabular data or (2) when I absolutely need to have two height-matching elements display side-by-side in a design. Some fanatical CSS enthusiasts would argue that this is a lame approach, but in some cases designers need to act on simple pragmatism.

If you’re in a situation where you need to use a table, please do not use extraneous HTML. The cellpadding and cellspacing attributes are not needed! You can do everything with CSS. It goes something like this:

The HTML:

<table class="columns">
    <tr>
        <td class="left">
            <p><strong>This is left-hand content.</strong></p>
            <p>Lorem ipsum dolor sit amet.</p>
        </td>
        <td class="right">
            <p><strong>This is right-hand content.</strong></p>
            <p>Lorem ipsum dolor sit amet.</p>
        </td>
    </tr>
</table>

The CSS:

.columns {
	width: 100%;
	border-collapse: collapse;
}
.left {
	width: 60%;
	padding: 0;
	vertical-align: top;
}
.right {
	width: 40%;
	padding: 0;
	vertical-align: top;
}

The Result:

It may still be a table, but it’s a minimal table if I ever saw one.

Good luck, and happy styling.

Update: Read my subsequent post for a more advanced example of this technique!
Update: Read a even more advanced version of this technique in an even newer tutorial!
Update: Find out how to automatically generate the HTML and CSS for this technique using jQuery.

I took the best of the best and came up with a very simple way to create totally scalable boxes with round corners. I’ve tested this on Internet Explorer 6, IE 7, Mozilla FireFox 2, Firefox 3, Opera 9, and Safari 3.

The Code

The HTML code is relatively simple. You have an outer <div> tag with four “corner” <div>s inside of it. Each of these corner <div>s are positioned with CSS so that they always appear at each corner of the outer <div> box.

HTML:

<div class="cornerBox">
    <div class="corner TL"></div>
    <div class="corner TR"></div>
    <div class="corner BL"></div>
    <div class="corner BR"></div>
    <div class="cornerBoxInner">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

CSS:

.cornerBox {
	position: relative;
	background: #cfcfcf;
	width: 100%;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url('corners.gif') no-repeat;
	font-size: 0%;
}
.cornerBoxInner {
	padding: 10px;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: -10px 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 -10px;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: -10px -10px;
}

The Image

Only one image is used for this box (shown above). In my example, I created a 20×20 circle, which is comprised of four 10×10 corners. By shifting the background image around, you can eliminate the need to download four separate GIF files on each of your boxes.

The Result

Karate Corners! Click on the image above to see the HTML demo. Happy styling!