As a designer, do you know where your work really fits in the process of design?

We all love Web design. Looking at a blank white box on a computer screen and using only your mind's eye, a mouse, and a keyboard to transform it into a living, breathing Website is no minor feat, and there is undoubtedly a creative rush when it comes to doing something like this. Web design can be a strong artistic outlet and it inevitably brings with it the joy that comes with looking at your finished work and presenting it to others.

Yes, in a word, Web design is fun. But let's face it: if you plan to make money off of Web design, then it also becomes a business.

If Web design is your business, then you must make certain you are in the right mindset and you use the right process when it comes to your work. You don't want your designs to fail, but, unfortunately, there is a strong chance that they will do exactly that. Lets take a step back for a minute and define what a failing design is, and why it fails.

Failing Design

Failing design is not necessarily poor design. This means that a "failing design" is not necessarily an ugly Website. Rather, a failing design is one that fails to function properly for the site where it's used. A design can be very beautiful, but be terrible for its purpose.

If your (or your client's) goal with a Website is to sell something or generate excitement over a specific idea or campaign, you'll want to design accordingly. For a site like this, you don't want to use a calm ocean picture as your header with deep ocean blues and blacks in your design. Sure, you may be able to make a very pretty design this way, but it's a failing design because it doesn't supplement the site's goal or message.

The above example is a gross exaggeration, but it serves to show why so many designs fail. The problem lies in the misunderstanding of the process of design.

The Process of Web Design

So many designers, especially newer, freelance workers, jumble up the process of design. What's worse is that this is a direct path to failure and they don't even know it. We'll be focusing on each of the aspects of the process of design in just a bit, but first, let's look at an overview. This, at its most basic, is the process of design:

• Planning
  Before you even get a single idea in your head about what your latest Web design is going to look like, you need to do all the appropriate planning. Mostly, this includes knowing the answers to important questions.
• Content Building
  You need to build all of the content of your site after you have a clear plan. This doesn't necessarily mean getting every detail down, but you need to know what your content will be and where it will go.
• Designing
  Now you'll design the Web site. This is a crucial step, of course, but if you've done the planning and content building first, this part will be the most fun, and most likely the most profitable! But keep in mind that there are several key considerations you'll be taking into account, so you won't be getting wild with your digital paintbrushes here.
• Development
  Once you've finalized your design, you'll turn it into XHTML/CSS/PHP/MySQL and whatever else your site needs. Development typically refers to the technical side of Web design: the coding and backend stuff.

As you can see (pay attention to this part, it's important!), designing the site comes late in the game. Many designers make the mistake of wanting to jump right into the design step, because that's where a designer's talents shine. But if you avoid or simplify the planning and content building steps, you will end up with a design that probably fits the site pretty well, but will ultimately fail in helping the site achieve its goals.

Therefore, it's important that you know and follow this process in your professional work. Let's take a look at the process in greater detail.

Step 1: Planning

There's a lot of work ahead of you before you actually get to start drawing, coloring, laying out, and generally designing your Website. First, you need the answers to these questions. You will know these answers if you are designing a site for yourself, or your client will know them.

You need to know the answers to these:

• What is your goal with this site?
  Are you trying to sell something? Deliver a message? Share information? Keep in touch? Etc.
• Who are your site's visitors?
  In other words, who is your target audience? This can sometimes be as vague as, "students" or as specific as "restaurant review publication advertisers."
• What do you want your visitors to do?
  Usually, if you're getting visitors to your site, you want them to actually do something. Some answers to this question could be, "buy a product," "sign up for a newsletter," or "learn how to build better Websites." This is an important question; make sure you have a good, clear answer for it.
• Why should they do it?
  Look at this site from the viewer's perspective. Why should they be interested in your site? What's in it for them?

If you or your client don't have clear answers for the above questions, it's time to do some research. Find some of your customers and get these answers or make some calls. Visit other sites that are similar to yours in idea and find out what kind of crowd they're drawing. If this is the type of crowd you'll be working with, then you'll have some answers.

Once you have good, clear answers to all of these questions, you can start building content for your site and start making some actual design decisions. With just these answers, you can determine the basics, like:

• Color
• Layout
• Font family
• Font size

Colors? Layouts? Fonts? Ah, here we go; this is starting to sound more like Web design! If you know, for example, that your goal is to provide wildlife safety tips to new campers, you will want a layout that allows you to provide clear, readable text. Because your tips will come mostly in the form of text and illustrations, you'll want plenty of body space and a font that looks good on screen and spaced well with CSS (Arial is a good default for something like this). Since you're dealing with wildlife-related material, your colors might mimic those of the woods, with deep greens, sandy and earthen tones, and dark wood colors.

But don't jump the gun and open Photoshop just yet! You're still not quite ready to start drawing and coloring. Next, you want to build the content of your site.

Step 2: Content Building

There's a phrase that's often thrown around in the Web development world: "content is king." This is true for most Websites out there. Most Websites want to be found and one key way sites are discovered is through search queries. Search engines frequently "spider" their database of Websites for new, clear, up-to-date, and original content, and Websites that have good content are rewarded with higher ranking and thus they are found more often.

It's no wonder, then, that content building is such an important step in Web design. With the answers you got from Step 1: Planning, you should know what kind of content you will want to start building. If your goal is to sell music and electronics, and your target audience is college students looking to buy things like iPods and digital cameras, then you'll want to write some content that's light-hearted, down-to-earth, and to the point while still building on the popular "lifestyle" trend that sells gadgets like these so well.

Or, as another example, if your target audience is a group of professionals in the medical research field and your goal is to pose challenging new ideas for collaboration or discussion, you'll want to write content that comes off as something of a technical blog.

Ultimately, though, the most important thing you want to do in this step is get all your ideas for content down on paper or in a text file. You don't need to write the ads for your music and electronics right now, for example, and of course you wouldn't want to spend the time in this step to write a long medical journal entry. For now, it's enough just to get all of your content down in shorthand. Just be sure you get it all.

Once you have all your content in a place where you can look at it, you'll want to build your sitemap. This is the final step before you actually start designing the site. You can use a computer program to draw your sitemap like I did below, but most of the time a pencil and paper works best for this part.

Let's take a look at a small sample sitemap for the music and electronics store we talked about earlier.

Here we can see that our homepage links to four other pages: Store Locations, Music, Electronics, and Contact Us. The Music and Electronics pages each link to different subsections. The Music page lets you choose a genre of music to buy, and the Electronics page lets you browse through different gadgets.

When designing your sitemap, it's important to remember the 3-click rule. Simply, the 3-click rule states that a visitor should never have to click more than three times on your site to do anything. In our sample sitemap, we can see that if a visitor wanted to get our other store locations, they would just need 1 click on the homepage. Or, if they wanted to browse through rock music to buy, they would just need to click Music on the homepage, then Rock on the Music page. Just 2 clicks.

While building your sitemap, you should make sure that every box (or page) on the sitemap will hold some of the content you outlined earlier. All of your content should have a place on your site, and you need to be able to visually see on what pages you'll put each bit of your content.

And now that we have our planning and content building done, let's get designing!

Step 3: Design

Many designers make the mistake of skipping steps 1 and 2, jumping instead right here to Step 3: Design. But if you got here after having done the necessary work beforehand, then you're on the right track!

In Step 1: Planning, you probably already got a good idea about what types of layouts and design you want to use. Let your creativity flow here. Remember, there are multiple layouts you will probably need for your design. You'll want a layout for your homepage, which, according to your sitemap, will just contain some introductory information or highlights, some links, and, depending on your goals, maybe some exciting imagery.

You'll also want a layout for your transitional pages. Transitional pages are pages that just shuttle the user to more important things. In the sample sitemap above, the Music and Electronics pages are just transitional pages. The Music page would be small, and contain links to the different genres of music below (Country, Hip Hop, Classical, and Rock). The Electronics page would also be small, and just contain small bits of information while it links to the more important stuff, like the DVD Players, TVs, MP3 Players, and Digital Cameras pages. Transitional page layouts should match the whole site, but also be simple so users can spend as little time on them as possible.

You probably don't want to hear this, but even at this point, you might consider leaving Photoshop closed for a bit. Instead, try drawing several layouts for your site on paper first. It's a good idea to build multiple layouts just to see how they "feel" with the site you're building, and using Photoshop to build lots of layouts that you might not even use is time consuming. It's much faster to draw some quick and dirty layouts on paper to get a rough feel for which way you want to go with the design.

By this point, you probably have a twitchy trigger finger right about now when it comes to firing your design gun. But take it slow. Here's something to consider about design.

Did you know that Apple, the company behind the designs of the wildly successful iPhone, iPod, and iMac computers and Macbooks, uses a design process they call "10-3-1?" It's true; at the 2008 South By Southwest Interactive Festival, I attended a presentation by Michael Lopp, Apple's senior engineering manager, where he revealed this small little bit of information to a packed room filled with designers.

Here's how it works. Apple designers must adhere to the 10-3-1 rule, where designers first give themselves plenty of creative freedom and come up with 10 good, wholesome designs for something. This could be for a site or a product, among other things. Then, after coming up with 10 good designs, they must go through the painful and often difficult task of eliminating 7 of them, leaving them with 3 really good designs to work with.

Then, the Apple designers will spend some months on these 3 designs improving them and bringing them up to Apple's game. Finally, after all this work, the designers must again eliminate 2 of the designs, until they're left with just 1 powerful design which gets the final work done and is given the well-known Apple brand and polish.

In recent years this type of thinking has been very good to Apple, and their designs have met with some big success. If you want your designs to be successful as well, then it's here in this step, Step 3: Design, that you should take the time before opening Photoshop to really plan out your design, taking into account everything you learned from Step 1 and knowing what the site will flow like from Step 2.

Make sure you finalize your design. Once you have your design ready, there's no going back.

Step 4: Development

If you've finalized your design (either to yourself or with your client), then you can begin developing the site. Depending on how you want the site to work, this could involve such complexities as PHP and MySQL backend programming, or it could just be as simple as some basic HTML and CSS. Either way, this step involves the actual coding of the site.

Some designers are solely designers and deal with only the basics of XHTML and CSS, opting to work with a partner or hire someone to do the coding of a site. Other designers know the development and coding side just as well as the design side, but these designers aren't altogether too common.

Either way, we won't go into the development of the site here. For the purposes of this article, it's enough to say that this is the final step, after the design is done, in the creation of a Website.

So, as you can see....

So, as you can see, actually designing a Website comes almost completely last in the process of Web design. If you want your designs to be successful, you will take the necessary steps to work up to the design.

It's easy to work with the mindset of, "I'd like to get this design done so I can add it to my portfolio." Yes, your portfolio is an important part of being a Web designer. But it's also key to produce a product that actually works for your clients (and for yourself). If your work is high quality and successful, then you can expect a great deal of success for yourself, as well.

I get anxious in certain environments. The reasons for this can vary from general disorganization, to bad lighting or clashing colors, but the biggest culprit is usually clutter. Clutter is the stuff that has no "place," doesn't belong with its surroundings, and serves little to no purpose. It's not that I'm a clean-freak, it's that I'm a designer, and I have a heightened sensitivity to things that are out of place or irrelevant. When disorder reigns, I get uneasy, anxious, even dizzy. On occasion, it gets bad enough that I feel the sudden urge to flee as quickly as possible.

Sometimes I get the same feeling when I'm surfing the web. Everyone feels this sensation to some degree, and it triggers the "fight or flight" response hard-wired into our brains (stay here and fight through this mess, or get out as fast as you can). It's no wonder most web pages are abandoned within a few seconds of viewing.

Whether intended or not, a person's home and the way he presents it are physical manifestations of his personality just as the design and content of a corporate web site are virtual manifestations of a brand. Environments, both real and virtual, affect human perception and behavior.

Clutter comes mostly from a couple of sources. As a natural progression, a home and a web site seem to accumulate things. At the same time, they are rarely purged of non-essentials. There is also the "design by committee" effect where everyone from every department wants their information front and center. It's better to decide what is most crucial and provide easy access to the rest. In a living room, the kids' toys should be contained in a designated basket or toy chest, while on a typical corporate web site, the HR information should be kept on the HR page. Most people are not coming to the home page to look for employment.

In someone's home, a quick escape is not always easy, but on a homepage, the "back" button is just a click away. If a web site is like a house, and its pages are like rooms, and people want visitors at their homes, how do they make visitors feel comfortable enough to stay? And come back again? How do we as designers create environments to attract, comfort and retain visitors? These are the things both interior and web designers stew over.

Visual Elements: On a web site, color, typography, iconography and other imagery should be considered as carefully as an interior designer considers surfaces, furnishings and art. Are they appropriate for the target user? A site targeting "metal heads" will not appeal to its market if it is bathed in soft pastels and cutesy typefaces.

Color: There are appropriate uses of color for specific messages targeted at specific end users. Once an appropriate color palette is defined, a designer can use it to direct users to specific content, organize that content, and create an appropriate environment. Too many colors, colors that clash, or use of too much strong color can make a space feel cramped and cluttered.

Typography: Too many typefaces in one place is like cramming a room with furnishings from different eras. Stick to a theme, and visitors will be more comfortable and get a better sense of the message the type is sending.

Imagery: We have all seen web pages with the cheerful customer service woman, or the close-up of the two hands shaking - "closing the deal." This is clutter, just like the faded Matisse prints we hung on our walls in college with scotch tape. Imagery (photos, illustrations, icons) should enhance an environment by promoting a message or feeling. Imagery becomes clutter when it serves no purpose, lacks quality, or is poorly presented.

Content: A clearly defined hierarchy of information is crucial to helping users understand what a site has to offer and finding the information they seek. If too many elements are shouting at visitors (flashing, bold, large, bright....), they are likely to be overwhelmed and move on. Sites that have a clear focus and logically organize less critical messages and elements provide a more approachable environment. Information that is presented with one voice and sticks to message is more likely to keep viewers engaged and confident.

Navigation/User Feedback: A house is generally set up with its rooms in logical locations; the entry way generally does not lead to a bedroom. The same is true for a well-designed web site. If a visitor has to think about where they can click to get more information, or click through multiple pages to get to specific information, they are not likely to stick around. The best web sites clearly map out what information is available where, and lead viewers to critical content via subtle feedback, like buttons or text that highlight when the mouse travels over them.

The bottom line is "web clutter" affects a business' bottom line. It has been well documented how clutter can drain us of time, energy, and trigger stress. When considered in the realm of the Internet, cluttered web pages make finding information difficult and lead to abandonment. Web sites that are "sticky" present viewers with a comfortable and organized environment and logical organization of content that helps viewers understand what is available and where to find it. The goal is to create an organized "home" with only the necessary things in their logical places to allow customers to find what they're seeking.

Ahhh. Peace at home and on the homepage through good design.

By: Kyle Mueller
Creative Director at MUELLER design
www.muellerdesign.com

What are Web safe fonts?

Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own.

However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When you are designing a Webpage, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn't have, that font will render differently (and often unattractively) on the visitor's machine.

So, how do you make sure that your fonts will look good on the largest number of computers out there? Easy: use Web safe fonts. As computing evolves, considerations for the Web have taken effect for modern operating systems and Web browsers. Among these considerations is a list of Web safe fonts that Web designers can use to make sure their fonts render properly. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there. Some (really) older computers may not have a few of the fonts that we consider Web safe today, but they are a minority.

Who should use Web Safe Fonts?

Every Web designer should use Web safe fonts. There are some cases where you will want to use a special, non-Web-safe font, but these cases are rare (and we'll discuss cases like this in a bit). You want to make sure your fonts are always easily read by your users. By keeping your fonts readable with Web safe fonts, you retain readership and make your site more accessible to a wider range of people.

I guess the best answer to the question "who should use Web safe fonts" can be summed up in one word: "you."

Why use web safe fonts?

As explained above, if you use a font on your page that your visitor doesn't have installed, their browser will pick a fallback font that you may not intend to appear on your page. Often, the result is ugly text that is not at all pleasing to read.

If a visitor can't fluidly read your site, then he or she can't get the information you provided, and this is the whole reason your visitors are at your site! Even if the text on your site is ugly and someone decides to trudge through it for your content, it will still look displeasing and you will retain fewer readers. A Website with no readers is a waste.

Using Web safe fonts is just one part of a larger set of design practices that keep your site user friendly. Don't strain a reader's eyes, don't make information difficult to find, and make sure they can progress through your site and content without having to think about it. (You can read a detailed article about building your typography here.) If at any point someone looks at your site and takes even a millisecond to think, "Ugh, that's some ugly text," you've jarred the experience. Ideally, the entire encounter with your site should be smooth as silk, and using a Web safe font is a big part of attaining that goal.

When to use Web safe fonts?

As a general rule, always use Web safe fonts for your page's content.

Where are web safe fonts applicable?

Your plain text headers, links, and content should all use Web safe fonts. If you plan to use normal text for your logo, you should also use a Web safe font for that. In fact, one of the few exceptions to using Web safe fonts is if you decide to use text in your images. If you plan to use images for some of your text, then it's safe to use other fonts because images will appear the same on the visitor's computer as it does on your own. However, you should never use images for all of your text. Images for text should be used sparingly. Logos and some headers may use images. Everything that's content or otherwise normal text, though, should use a Web safe font.

How do I use Web safe fonts, and which ones are safe?

Include Web safe fonts in your CSS with font or font-family rules. (I've included the most useful ones below for you.)

There are a good number of Web safe fonts. Many of them look very similar to other Web safe fonts, and in practice they are essentially the same. A CSS rule for your font family, for example, may look like this:

font-family: Arial, Helvetica, sans-serif;

The first font listed, Arial, is an extremely common font available on most computers, so you can safely bet that it will show up properly on a visitor's screen when they visit your site. In rare cases, a computer may not have Arial installed, however. Older Apple computers, for example, may not have Arial, as well as several other fonts. Helvetica, though, is widely installed among Apple computers, and it looks very similar to Arial, so Helvetica is listed second. When a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed.

And in extremely rare cases, some computers may not have Arial or Helvetica installed. In this case, "sans-serif" is used. This is a fallback, default font that the Web browser will use if it cannot find any of the previously listed fonts.

There are four types (or families) of Web safe fonts: serif, sans serif, cursive, and monospace. Each of these has their own fallback font (like sans-serif above). The fallbacks for each family, respectively, are: serif, sans-serif, cursive, and monospace. You will find that font rules almost always include one of these fallbacks, and always last.

The fonts are listed in CSS format so you can easily copy and paste them if you don't feel like typing them out. This is likely how you will be seeing the fonts most of the time, anyway.

Serif Web Safe Fonts

The art of Web design has many general guidelines that have taken hold as the Web has become more firmly rooted in the Web 2.0 setting. We have other articles that discuss when to use serif and sans serif fonts, so all I will say here is that, in general, serifs have generally been used mainly for headings. Below are the Web safe fonts that you can use for your serifs.

font-family: 'Bookman Old Style', serif;	Bookman Old Style
font-family: Garamond, serif;	Garamond
font-family: Georgia, serif;	Georgia
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;	Palatino Linotype, Book Antiqua
font-family: 'Times New Roman', Times, serif;	Times New Roman, Times

Sans Serif Web Safe Fonts

Sans serifs are typically used for the bulk of the content on a Web site.

font-family: Arial, Helvetica, sans-serif;	Arial, Helvetica
font-family: 'Arial Black', Gadget, sans-serif;	Arial Black, Gadget
font-family: Impact, Charcoal, sans-serif;	Impact, Charcoal
font-family: 'MS Sans Serif', Geneva, sans-serif;	MS Sans Serif, Geneva
font-family: 'MS Serif', 'New York', sans-serif;	MS Serif, New York
font-family: 'Trebuchet MS', Helvetica, sans-serif;	Trebuchet MS, Helvetica
font-family: Verdana, Geneva, sans-serif;	Verdana, Geneva
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;	Lucida Sans Unicode, Lucida Grande
font-family: Tahoma, Geneva, sans-serif;	Tahoma, Geneva

Monospace Web Safe Fonts

Monospace fonts are useful when you want to make sure characters all line up with exactly the same width. Displaying code or tabular data without using a table are good uses for monospace fonts.

font-family: Courier, monospace;	Courier
font-family: 'Courier New', Courier, monospace;	Courier New, Courier
font-family: 'Lucida Console', Monaco, monospace;	Lucida Console, Monaco

"Cursive" Web Safe Fonts

Currently, there aren't many Web safe cursive fonts. There is a "cursive" fallback, like sans-serif, serif, and monospace, but for the most part this is highly unused. There's some debate whether Comic Sans MS is a compatible match with the cursive fallback font. Some think Comic Sans MS belongs with sans serif fonts, and others say it's the closest font to a normal "cursive"-like feel that you can currently get in a Web safe font.

In any case, cursive and Comic Sans MS are typically avoided. Personally, my opinion is that you should avoid both of these altogether.

font-family: 'Comic Sans MS', cursive;

Comic Sans MS

In some cases, can I use other fonts?

Yes, there are some exceptions to the "always use Web safe fonts" rule. Sometimes due to circumstances out of your control, you simply must use a font that is not considered Web safe. A client, for example, may have a business that has used the same font for their company's signs, trademarks, and logos for over a century. Bringing a business like that to the Web without losing its long-standing integrity and brand recognition would likely be impossible with a Web safe font.

Or, perhaps you, as a designer, want to experiment with design and take things to the bleeding edge. I've always believed that true artistry and experimentation lies in the artist's ability to see beyond the normal scope and step away from standard practices. If you share this idea, then undoubtedly at some point you're going to look for ways to tinker with non-Web-safe fonts in your pages.

Below are the best ways to use non-Web-safe fonts in your page, and still have them render properly on most computers out there.

Provide downloads for your users

If you want to use a very specific font for your site, you can include a link to the font file on your page. In this way, visitors can download and install the font, then visit your page and see the font rendered properly with no real drawbacks.

This is a lot of work to expect the visitor to do, though, just to view your site as you want them to see it. The visitor doesn't usually want to do anything special just to view a Webpage. Requiring that someone go through the trouble of downloading and installing a font just to view your site is a great way to lose visitors. Odds are, most of your visitors won't even know where to begin installing the font, anyway.

There are also some potential legal issues if you take this route. If you are not the person who created the font, then most likely you do not have the legal rights to distribute it.

Because of these major flaws, this method is widely avoided.

Use images

When you use an image editor like Photoshop, The GIMP, or even MS Paint, you can create images that use any font you like. Put the image on your page and it will look the same on a visitor's computer as it does on yours. Below is an image that uses three non-Web-safe fonts that came pre-installed on my Macbook.

Whether you, as this site's visitor, are on a Mac, a Windows PC, in your favorite flavor of Linux, or even surfing on something else like a PDA or iPhone, the fonts above show up properly. This is true even if your PC doesn't have these fonts installed.

This is a great way to display any font you like for your logo, advertisements, or some of your headers. However, you cannot rely on images for actual content. A visitor cannot highlight text with the mouse, meaning that if they want to copy and paste your text somewhere (say, to send your business name to a friend), they can't do it. Also, text in images cannot be read by screen readers, which some handicapped people use to browse the web. Any text you have in your images will not be accessible to these people. Plus, some people browse with images turned off or have their images blocked by a third party, like in some corporate offices that use a proxy server. Finally, search engines cannot properly read and catalogue text within images.

All in all, any text you use in your images should primarily serve as purposeful decoration. There is an alternative though: use an image replacement technique.

Image replacement techniques

There are techniques you can use in your CSS and (X)HTML that will let you use images in place of regular text while maintaining your site's accessibility and search engine friendliness. Notice the header above that reads "Image replacement techniques" is an image. It uses a font called Rockwell (which also came installed on my Macbook) and the font is green rather than the typical black we've been using.

This header utilizes an image replacement technique called Single Pixel <img> Replacement. It uses CSS and (X)HTML to display the image, but if someone has CSS turned off, the image will not show. To solve this problem, there is a hidden span element that will still neatly display the text "Image replacement techniques" for this header.

As for screen readers and other situations where images might not be accessible, there is a 1-pixel image with alt text that reads "Image replacement techniques." This way, we aren't harming accessibility and screen readers will still pick up the text as we intend it.

One of the only disadvantages to using this technique is that it adds some extraneous elements to your (X)HTML. They don't harm anything, but they do add more bulk to your work and the filesize of your document. It also makes it more difficult to follow when reading your site's code. Even still, it's a fantastic way to add rich typography to your site.

The astute reader may have already taken a peek at this section of the article to get a look at the CSS I used here. Please note that I had to modify the technique a bit for use on WPDFD since it already has pre-existing styles. If you want to try out this image replacement technique on your site, let me provide you the better code to work with.

I'll even give you he images to work with. First, download and save these. (Right-click and save.)

• spacer.gif — yes, I know the general feelings about spacer.gif. Let's keep it between us, just this once.
• irt.gif. This is the header image.

Second, add this code to your CSS file.

	#header {
	    width: 250px;
	    height: 30px;
	    background-image: url(irt.gif);
	    }
	#header span {
	    display: none;
	    }

Finally, implement the image replacement with this in your (X)HTML:

	<h3 id="header">
	    <img src="spacer.gif" alt="Image replacement techniques" />
	    <span>Image replacement techniques</span>
	</h3>

View it in a browser, and you should see the effect at work. You can find a list of image replacement techniques over at mezzoblue, which is where I was introduced to this particular image replacement technique.

Use sIFR

sIFR (Scalable Inman Flash Replacement) is perhaps the most popular way of using rich, beautiful fonts on your page. Indeed, you can see an example of it at the top of every WPDFD article. This article's title, "Knowing About Web Safe Fonts," is displayed for most users in a font called Interstate, which is not typically a Web safe font.

There are only a few steps to setting up sIFR, including a process called "font tuning" (don't worry, it's not tough), but it still generally takes even an experienced Web designer/developer roughly 10 minutes to set it up across a site that didn't previously use it.

It is easy to set up, however, and its benefits are many. It provides scalable, accessible text in a font of your choosing by dropping a Flash element with a transparent background in place of your original text. If a visitor to your site doesn't have javascript, Flash, or either installed, then your text is still displayed on your page in a CSS-styled, normal header.

Personally, sIFR is the method I would recommend if you want to really strengthen your site's typography. It's important to note, though, that sIFR should not be used for the main content of your site. Use it for headers, quotes, slogans, and other small, but significant, bits of text.

Currently, sIFR 2 is the standard, but sIFR 3 is in beta testing. When sIFR 3 is out of beta and I've had some time to play with it, I fully intend on covering this topic in more detail. In the meantime, if sIFR interests you but you don't want to go through all the setup, you might want to take a look at a tool that does it all for you.

So there you have it!

Well, you came upon this page and read through this article so you can stay informed on Web safe fonts, and now you know all the most important aspects of them. It's probably a good idea to bookmark this page so you can have a list of Web safe fonts handy at all times.

If you'd like more information on how big of an effect readable text has on your page, feel free to read a previous article of ours, Simple CSS: Creating More Readable Text.

One of the greatest aspects about the Web is that it's such an open platform, especially for design. The accessibility and freedom of the Web allows designers to do some very nice-looking things, and it allows for experimentation and interpretation. Unfortunately, it also allows for some very bland-looking things, too. Let's take a look at some bland designs and some grand designs, and take a peek at what makes them that way.

A few things to keep in mind before we continue. It doesn't matter if a web design is bland and tasteless or grand and stunning; only designs that are functional and coherent are in this article. For the bland web designs, I didn't want to show designs that are obviously terrible. Instead, I wanted to show designs that serve as websites with some actual merit, but could stand some improvement on the visual, functional, or coding side of things. It's easy to find designs that are just completely bad, so I won't be covering them here. But, if you'd like to see some, there's a site that focuses on them.

Likewise, it's fairly easy to find designs that look beautiful. But this doesn't always mean they are functional or well-coded, or even have anything else going for them besides good looks. Instead of focusing on these purely beautiful sites, then, in this article I hope to showcase some that are pleasing visually and elegantly handled in both functionality and coding, and try to point out why they're grand.

Bland Web Designs

Click one of the designs below to view it. You'll find what's to like about the design, what's not to like, and some ways that particular design can be improved. If you want, you can start with the first one and view them in order.

• 
• 
• 
• 
• 
• 
• 

 

View the bland designs in order »

Grand Web Designs

Here are some of the better designs out there. Thanks to everyone who submitted a design! If your design didn't make it here, don't worry; I'm still taking a look at all of them! If there are articles like this one in the future, I'll definitely be considering all the designs that didn't make it.

You can choose a design below, or you can start at the top of the list and work your way through them all.

• 
• 
• 
• 
• 
• 
• 

 

View the grand designs in order »

Keeping Things in Line

As stated above, each of these designs has their own merit. The bland designs could stand to use some improvement, and the grand designs are great examples of good web design. I received quite a number of submissions from my request for designs and I saw some very good stuff in there.

There are a number of articles and sites out there that show you what bad design is, and others show you what good design is. Not many places deal with sites that are "just at the line," though, and I hope with this article I've helped demonstrate the differences between design that fits the bill and design that goes above and beyond.

They've been around for a while now: reset style sheets. They're becoming more commonplace among web designers, and even Yahoo is using a reset stylesheet of their own in their development. There are a few different viewpoints and opinions on the use of reset stylesheets, though. Do you reset?

What are reset stylesheets?

For those that don't know, a default reset stylesheet is a .css file that you use in your HTML documents. The file has CSS rules that effectively neutralize a browser's default rendering of HTML elements and positioning. It sets all margins and padding to 0 and removes text decoration, size, and weight from HTML tags that normally have these by default, like the header tags (h1 - h6), em, and strong.

To use a reset stylesheet, you link it in your header like any other stylesheet. Then, when you're writing your own CSS, you can choose exactly how each element is to look. You can turn the bold text back on for the headers, and set the exact amount of padding you want, for example. Set your font faces and spacing however you like. The idea behind this extra work is that when a browser is reset to this zeroed-out state, you can specify exactly what you want your elements to look like, and practically all browsers will have an easier time rendering your design as you intended it rather than how the browser's defaults want to display it. The reset stylesheet removes the browser's defaults, so you don't have to worry about them.

If you want to try out a reset stylesheet, you can get Eric Meyer's reset stylesheet here, or you can try out YUI's Reset.

Keep in mind: resetting in web design, like many other things, has its pluses and it has its minuses.

Reset stylesheet advantages

Resetting greatly helps a designer build designs that look most similar (sometimes, identical) cross-browsers.
Because a reset will "zero out" a browser's formatting of your HTML, you get total control in your own CSS to declare exactly what you want, without the worry of whether or not a specific browser is going to tamper with your design.

Reset stylesheets can be modified to suit your tastes. A reset doesn't always have to zero out absolutely everything. Maybe you're comfortable with how the different browsers handle some things, or maybe you have a different idea for what the baseline for most of your projects should be. You can modify a reset stylesheet to suit your needs and create a uniformity amongst your work that is unique to you.

An experienced designer who resets can save time. It's true that learning to use a reset stylesheet can take some time to get used to, but once you've learned the ins and outs of your reset, and have your own modifications that you've built over time, you can pop your reset and modifications into a design and just start designing.

Simply put: your HTML document becomes a blank canvas and you can work with whatever CSS you wish.

Reset stylesheet disadvantages

The "clean slate" effect takes some getting used to. This adds a bit of a learning curve to your web design, which you're probably already nice and familiar with. Most likely, you've built up your methods and workflow over time, and something as drastic as a reset stylesheet can slow you down again.

Because resetting takes everything down to basics, you have to re-add things that you might think should just be included, like bold text in headers. You'll also need to pay special attention to where exactly you want all your design elements to appear, and how. Things you used to let the browser take care of, you now have to code for. This leaves you writing more CSS than you probably want to, or even need to.

Even through all this extra work when using a reset stylesheet, the reset still doesn't guarantee that your designs will look identical in various browsers. In fact, in some extreme cases, your design may end up looking no different across browsers than if you hadn't used a reset stylesheet. YUI's reset stylesheet, for example, works best with just what they consider "Grade-A" browsers, and some parts of the reset don't affect browsers not on this list. Granted, the Grade A list is the list of browsers we all design for primarily, anyway.

Differing points of view on reset stylesheets

Eric Meyer released his stylesheet, and people picked it up then seemingly immediately split into groups: those who like it, those who hate it, those who don't use it but can see its usefulness, and those who use it if the job calls for it. Want to see some people who fall into these various groups?

Jonathan Snook is one who falls into the "those who don't use it but can see its usefulness" group. He posted on his site his thoughts on reset stylesheets, and why he doesn't use them. In a nutshell, he states that reset style sheets take things overboard, and while he doesn't necessarily have anything against them, they just don't suit his tastes. In his opinion, they require too much work to go about re-declaring things in your own CSS that should just be there, which reset style sheets take away.

Eric Meyer obviously falls into the "those who like it" group. After Jonathan's post above, Eric felt that people were getting the wrong idea about his thoughts on reset stylesheets, so he cleared things up on his site. He never intended reset stylesheets to become a "be-all, end-all" solution to cross-browser compatibility, and in fact, wants and actively encourages users you take his reset and modify to fit their tastes, or even not to use it at all if they don't want to.

Jens Meiert (grouped in "those who hate it") states pretty strongly Why Reset Style Sheets are Bad. Jens says that "novices should not use them, [and] experts would not use them," then goes on to list the reasons why (load time increases and accessibility concerns, among others) and lists alternatives to resetting.

If you'll read through the above links, you'll find that many of the comments on those sites are made by users who fall into the last category: "those who use it if the job calls for it."

What do I think?

When it comes to resetting in my web design, I fall somewhere between "don't use it but can see its usefulness" and "use it if the job calls for it." When I've played with it for my own local pet projects, I found it adding time to the project that I could have avoided. I can see, though, that if I spent some more time with it and made my own tweaks, which is what Eric intended with the idea of a reset sheet anyway, it might speed up my work in the future and help my designs. For right now, though, for anything serious, I won't use it, but I'll still recommend others give it a shot.

It's a tool.

Everyone has their own method of designing and they have their own tools. These tools include your text editor of choice, your operating system of choice, what graphics editors you use, palette generators if you choose to use them, and now, reset stylesheets. If you prefer to draw your design on paper, scan it into Photoshop and add color, then cut the design into divs, that's what you do. If you prefer to mark up the HTML of your site first, then tack on a reset stylesheet and build your CSS before adding your images, great. Everybody does things differently.

I think it's best to view a reset stylesheet as a tool in your toolbox. It's in mine, and while I'm not too good with that tool yet, I know some people can use it masterfully, while others choose not to use it at all. Either way, the craft is yours to do with what you wish, how you wish to do it. I don't think the inclusion or non-inclusion of a reset stylesheet says anything more than, "Hey, this designer used/didn't use a reset stylesheet."

I'd like to encourage users who are thinking of using a reset stylesheet to give it a shot in their next project. Maybe you'll like it, and if you don't, then no harm done; you can always just not use it.

Do you have a good Web design? I'd love to see it.

As part of an upcoming article for WPDFD, I'm going to showcase and discuss some good-looking, functional, and well-coded designs. If your design can match any of these three primary descriptors, a screenshot of your design and a link to your site might make it into the article.

Just drop me a line at drodriguez@wpdfd.com with links to any of your designs that you think should make it. I'm not yet sure how many designs I will be displaying in the article, but if the article is well-received and readers seem to enjoy it, I'll probably do more articles like it later. So, even if you don't make it into the first article there's a chance you'll make it into a later one.

In addition, the best designs have a good chance of ending up on our Featured Designs page. Sweet!

Feel free to submit your design by e-mailing me directly.

For your design to make it into the first article, please submit it before Wednesday, May 7, 2008. Don't worry if you can't make it by that time, though; you can still submit your design after May 7. Hopefully, if there are more articles like this later, you'll have a chance at getting into one of those, and there's always a chance at ending up in the Featured Designs.

Here's looking forward to seeing all your beautiful works!

As the practice of Web design ages, some common rules and "best practices" inevitably embed themselves in the craft. Among these are the processes for using specific types of semantics when coding your site, like using divs as hooks in your X/HTML for your CSS, and making your page beautiful and functional that way. Another is to ensure readability of your site by choosing a proper number of fonts (generally, no more than three or four, and for the minimalist, one or two). More important than that is the type of font you choose.

Typography in your Web design is undoubtedly important. For some time now, it's been taught and practiced that using a sans-serif font is the best choice for page content and large blocks of text in Web design, while serif fonts should be reserved for use in small doses or as the style of choice for your headings. WPDFD even has a very recent article that states this. Some other places you can find this teaching:

• About.com
• Urban Fonts
• Web Design Reference

In a nutshell, here are some of the key points in using sans-serif fonts.

• Sans-serif fonts look good at most sizes.
• They tend to have a more contemporary or business feel.
• Most operating systems render them neatly.
• Serif fonts tend to lose readability at smaller sizes.
• Serif fonts, when viewed on a Windows computer, may look terrible. This is because Windows has a ClearType ability that smoothes the edges of screen fonts, which would make the serif fonts look good, but many Windows computers don't have this option turned on by default.
• Sans-serif fonts, on the other hand, can look good with or without Windows' ClearType turned on.

Overall, designing with sans-serif fonts for your main content is a good general typography rule for your Web design. Many often-visited sites use sans-serif fonts for viewing on the web, and it certainly works well for them. Google is an obvious example. Also, Microsoft and Yahoo follow this convention. Especially prominent sites in our own field, like A List Apart use it to very good effect. And if you'll take a quick look around, you'll notice WPDFD sticks mainly to sans-serif fonts, as well.

But. (You knew that was coming, didn't you?)

I fired up my RSS reader recently and came across a fairly attractive page with an entry about designing with type characters. This particular page doesn't touch directly on using serifs in Web design, but I found it easy to read.

It was also fairly refreshing. Seeing so many sans-serif fonts used in only so many ways on the Web isn't exactly tiresome, but it certainly does lend a certain charm to serif fonts when you seem them executed well in Web design.

That same page above also has links to a few other pages that use serif fonts well. For your convenience, I'll link them here, too, and include my thoughts:

• Twisted Intellect
  I like this page. It reads well and it's a very elegant design. The typography here is very nice.
• The 3rd SEED Conference
  While Twisted Intellect uses serif fonts, it doesn't use them for lots of content. The 3rd SEED Conference does exactly the opposite: the entire design is serif fonts; no images. It's just layout, placement, and typography. This is executed beautifully and I really like what's been done here.

There are some other sites I've come across while just browsing leisurely, too, that caught my eye with their use of serifs.

• Jens Meiert: Why Reset Style Sheets are Bad
  This is a good-looking, minimalistic blog that uses serif fonts to good effect. And hey, the page even touches on an interesting topic.
• Fun With Fonts
  This is not only a cute short story about a robot; it's also a good use of typography. The serif font here accomplishes its job very well.

The examples of good-looking pages above were all delightful to look at and to read. As opposed to sans-serif fonts, it seems that serif fonts do take a bit more skill for a Web designer to wield effectively, but the payoffs can be quite impressive.

Things to keep in mind

From what I can see, there are numerous advantages and disadvantages to using a serif font.

Benefits of using a serif font:

• Thanks to the vast majority of web sites using sans-serif fonts, using a serif font can lend your page a refreshing, personal, warmer, and more visually attractive appeal. Any or all of these effects can be accomplished with the right styling.
• A page using serif fonts is different, and helps you stand out.
• Serif fonts tend to give a web designer more to "work with." Their shapes can range from rigid and stoic to elegant and understated.
• I think serif fonts benefit more from color and experimenting with color, though this is just personal opinion on this one.

Things to watch out for when designing with serif fonts:

• This is one of the biggest points against using a serif font, so pay close attention: Serif fonts, especially when italicized, usually look terrible in Windows! The ClearType preference must be turned on for the fonts to look nice, and many Windows users do not know where to turn ClearType on or what ClearType even is.
• Serif fonts lose readability at smaller font sizes. A medium to large font size works best.
• See here for an example of how serifs can break down and make the eye struggle at too small a size.
• Serif fonts tend not to have a "business" feel about them, so it's probably still best to avoid them when designing a commercial site. They lend themselves better to "personal" or "informative" content.

When you really look at the points against serif fonts, though, you can see that generally they break down into two main problems: readability in Windows and text size concerns. Both of these problems aren't as big a trouble as you might think.

For one, Internet Explorer 7, while not the best browser around, uses its own ClearType rendering, whether or not ClearType is turned on in a user's Windows settings. Most Windows users still use Internet Explorer to browse, so serifs for these users will seamlessly look as you, the designer, intend them. The widespread use of Internet Explorer 7 alone significantly reduces the concern for how serif fonts will look in Windows.

Secondly, if a user does use Firefox or another browser in Windows, your concern for how your serifs will look can drop a bit more. It's safe to think that most (or at least some) users who have another browser installed also have enough knowledge of Windows preferences that they'll have ClearType turned on, or have the knowledge of how to do so.

As far as text size is concerned: that's totally up to you. This is a non-concern as far as many Web designers consider it, since you are the designer and can choose to use a decent-sized serif font. This leads to a third point against serifs that is focused more on you than on technicality: serifs are a bit tougher to use in Web design than sans-serifs.

That's not a terribly large issue, though, because it's one that you can get around with your design. In fact, as is the case with the sites I've listed above, it may not even be something to "get around," but instead an intentional tool to work with in your design.

Keeping the "design" in Web design

I would like to see more modern Web designs using serif fonts for their content. They look really nice when used well, and it's a scary thought to think that we may be running into design clichés with the whole sans-serif-for-content "rule." The Web is a great canvas, and I hope designers can continue to do great and beautiful things with it, especially when those beautiful things step outside the lines and manage to remain functional.

Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better. CSS provides three very useful properties to enhance the readability of your site: font, line-height, and letter-spacing.

A sample page

Let's begin with a small sample Webpage. You can view it here. This page uses a small, pretty standard design with some low-key colors to help emphasize the content. This is a good use of design and color if your site fits in the "content is king" category (and most sites do), especially if your content consists of articles or other long blocks of text, like a blog.

The thing to notice here is that the text does its job: it communicates a message and the user can walk away having consumed your content. But the text is the same across the whole page, with the exception of a color change in the small subheading below the header text and the positioning of it. Here's the CSS that's being used in the sample page.

body {
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #363942;
	color: #382513;
}

#container {
	margin: 15px auto;
	text-align: left;
	background-color: #D8CAA8;
	border: 1px solid #4B1E18;
	padding: 0px;
	width: 850px;
}

#header {
	height: 80px;
	border-bottom: 1px solid #284907;
	margin-bottom: 15px;
	padding: 15px;
}

#header h1 {
	position: relative;
	vertical-align: center;
	color: #382513;
	margin-bottom: -10px;
}

.subheading {
	color: #284907;
}

#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
}

#content {
	padding: 0 15px;
}

#footer {
	clear: both;
	border-top: 1px solid #284907;
	padding: 15px;
	margin-top: 15px;
}

Choosing your fonts

To improve readability, we'll want to choose a font that looks good with the colors you've chosen and at the size you plan on making your text. Typically, a non-serif font is advisable for the main content, while headers benefit from the added noticeability of serif fonts. If you come from a print background, this may sound backward. Usually, in the print world, serifs are preferred for blocks of text because the serifs help the eye distinguish each line. However, modern operating systems have options to smooth the edges of screen fonts automatically, so non-serif fonts come out looking better as main content and serif fonts look good in small doses.

With this in mind, I'm going to use one of my favorite lines when it comes to CSS and fonts:

font-family: Arial, Helvetica, sans-serif;

These fonts are some of the safest you can use in your design, and if cross-browser compatibility is a concern, memorize them. They're good to use on their own, or you can use them as a starting point for your non-serif text. In this case, for simplicity's sake, I'm going to stick with just these three for the content. The body section of the CSS now looks like this:

body {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #363942;
	color: #382513;
}

And with that small change, the overall readability of the page has changed slightly for the better: see for yourself.

The slight change is good, but all of the font is still the same family and this creates a bad sort of uniformity. We want some distinction going on here, so let's set our headings and subheading apart from the rest of the content. We'll ignore the h1 at the very top for a bit, since we'll want to do something a little different with that in a second.

For the subheading and the heading in the content, I'll be using a serif font. Just like above, this next line is probably one of my favorites:

font-family: Georgia, "Times New Roman", Times, serif;

Again, these are some of the safest fonts you can use in Web Design, even if it's just for a starting point and you plan to expand your typography a bit later. Reserve this line for headers and other places where it would look good in small doses; the eye has a tougher time reading serif fonts on a screen than non-serif fonts so whole blocks of serif text can be jarring.

So now, our subheading class looks like this:

.subheading {
	color: #284907;
	font-family: Georgia, "Times New Roman", Times, serif;
}

And we need to create a new rule for h2 tags in the content section. We do so like this:

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
}

Alright, now the header information is more separated from the content, which is good. Take a look here.

Now, what about that h1 header we have at the top of the page? We're going to make it larger and give it less contrast to its background. This is so that users will know what site they're on, but won't be distracted by the header.

We'll do this with this code:

color: #6B5846;
font-size: 48px;

And the full header h1 rule now reads:

#header h1 {
	position: relative;
	vertical-align: center;
	color: #6B5846;
	margin-bottom: -10px;
	font-size: 48px;
}

You can view the modified header here.

Now we turn our attention toward the sidebar and footer. The text in the these places is the same as the body text in main content area. The sidebar and footer typically play secondary roles, so we'll give them smaller text and a different font family with a single font rule:

font: 12px Verdana;

Now, our sidebar and footer divs have the following CSS:

#footer {
	clear: both;
	border-top: 1px solid #284907;
	padding: 15px;
	font: 12px Verdana;
	margin-top: 15px;
}

#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
	font: 12px Verdana;
	color: #5A4735;
}

Right now, the content text feels a bit overwhelming. We'll reduce its size with this:

font-size: 15px;

And we'll put it in the content rule, so now it reads:

#content {
	padding: 0 15px;
	font-size: 15px;
}

And now we have our fifth iteration of the CMRT page. We've taken some good steps in making sure the different sections of our site each have their own look and feel while still feeling unified. Now, we can take it a step further with the line-height property.

line-height — Be good to your visitors!

Your visitors are there to see whatever content you have up on your site. They've come to see you and they're your guests! Treat them well. You don't want to strain their eyes when they view your page. Use line-height to make your text more readable. Adding more line height to your text increases the amount of space between each line, and it helps the eye make that jump as it moves down your content.

We'll give the content div a line height of 160%, which basically gives it 60% more line height than it normally has, based on font size. This is a decent amount of line height and gives the text some room to breathe. For the sidebar, since the text is smaller, we'll only give it a line height of 140%. So, now our content and sidebar CSS are as follows:

#content {
	padding: 0 15px;
	font-size: 15px;
	line-height: 160%;
}
	
#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
	font: 12px Verdana;
	line-height: 140%;
	color: #5A4735;
}

And with this, the text takes on a much more pleasant look. See here. The eyes don't have to work as hard to read the text now, so it's easier for your visitors to consume your content.

Adjusting letter spacing

There are only a couple of places where letter spacing comes into play with this page, but it too can play a part in increasing your site's readability and help make each element on the page more distinct. Headers and headings are usually good candidates for letter spacing. From a design point of view, you can use letter spacing on your header text to add some improved visuals to your page, like we're going to do in the header div with this:

letter-spacing: 20px;

This increases the space between the letters of your text by 20px. 20px is a big number for ordinary text, but for the header at the top of the page, which is just 4 letters, it helps it stretch to be just about as wide as the subheading beneath it, giving it more of a header feel.

For the headings (the h2 tags) in the content of the page, we're going to increase the letter spacing by just 2px. This will lend the headings a more prominent feel and separate them further from the text, and the adjustment is minor enough that it will not distract from reading:

letter-spacing: 2px;

So our header's h1 CSS and our content's h2 CSS now look like this:

#header h1 {
	position: relative;
	vertical-align: center;
	color: #6B5846;
	margin-bottom: -10px;
	font-size: 48px;
	letter-spacing: 20px;
}

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: 2px;
}

You can see what it all looks like when done right here.

Expanding on this CSS

There are a lot of different ways you can apply these properties, too. For the design of the page I purposely used a simple, rather unintuitive design so I could focus on the text as it changed during the above steps, but applying this kind of CSS to a much more vibrant and elegant design can drastically improve its effect on your visitors. I don't intend to "pretty up" the CMRT sample page, and if I do, it will be for a totally separate article, but if you'd like to take a crack at making it look prettier while preserving the font and text adjustments, hit me up and we'll talk about it.

Stay tuned for more of the Simple CSS series!