- CSS Font Control
- Color Schemes
- An Inflatable Alphabet
- Table-Formed Fonts
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Color Schemes
What HTMinimaLism loses in the way of images it must make up in the way of code-generated color. Color is a crucial element of this design style, setting the emotional tone for the site and giving meaning to key navigational elements. There is always the classic black-on-white scheme, and 37signals.com uses a nice muted gray on white for its body copy text, with a near black as the unvisited link color and a lighter gray as the visited link color (see Figure 2 in the previous article):
<body bg=ffffff text=666666 link=333333 vlink=999999>
For a less generic yet still conservative color scheme, testpilotcollective.com (see Figure 2) sports a pleasant muted blue palette:
){kind=link}
<body bgcolor=6699CC text=ffffff link=ffffff vlink=FFFF00>
Figure 2 testpilotcollective.com.
This site uses standard Helvetica rather than hip Verdana, and it controls the text with the old-school <font> tags rather than Cascading Style Sheets. Consequently, the letters are larger on PCs than on Macs, but the difference is not really objectionable. Most of the uniqueness of Test Pilot Collective's core page is achieved via the use of custom-made fonts, served as thin-loading transparent GIFs and antialiased to match the page's background color.
These classy non-HTML fonts enoble the otherwise plain HTML Helvetica. The blue background also has its own pseudo-antialiasing effect on the white HTML text. It's just an optical illusion caused by the relationship of these two colors on a monitor, and a happy accident it is. This color scheme is much less harsh than black on white, yet it's still reserved.
For an even more pronounced blue/off-white scheme, there's James Widegren's threeoh.com (see Figure 3). Threeoh's palette is <body bgcolor=328CC4 text=B7DDFD link=7CDAFE vlink=7CDAFE>, applied to a miniscule 9-pixel Geneva. Because the colors are not browser-safe, Threeoh's text assumes a funky purple hue at 256 colors, but James doesn't care because most of his visitors are graphic designers surfing on high-end systems. (Note: threeoh.com has since been redesigned.)
){kind=link}
Figure 3 threeoh.com.
Note the clever use of minimalistic GIFs with strong outlines, all reinforcing the site's color scheme (and no GIF any fatter than 7K). Threeoh's design approach is perfect for the Web. Had these GIFs been JPG photographs, the site would have taken much longer to load and would not have been as interesting or cohesive visually. Even the partition lines separating the page's various content areas reinforce the site's color scheme and its "outlined" approach.
Finally, on a darker note (literally), there's Joshua Davis's customized bulletin board, dreamless.org. Davis takes off-the-shelf BBS Perl software and customizes the front end to look—well, dark. The splash page sets the tone of the site (see Figure 4). Just a straightforward message in a straightforward font.
){kind=link}
Figure 4 dreamless.org.
dreamless.org's color scheme is completely grayscale: <BODY bgcolor="#242424" text="#707070" link="#ECECEC" alink="#ECECEC" vlink="#ECECEC"> (see Figure 5). The mouse-over links are plain white. The tiny circular GIFs that delineate unread posts are maroon, standing out like a sore thumb in this context (as intended). The font is plain old Arial. And that's it. Not exactly the optimum approach for cartoonnetwork.com, but very appropriate for dreamless's target audience—young underground Web site designers. Dreamless has a somber, back-alley feel that entices the type of person interested in debating the relative design merits of Marcel Duchamp, while simultaneously repelling the type of person interested in discussing cute puppy names. The site's off-putting design acts as a kind of trial-by-fire rite of passage. If dreamless.org is too bleak and minimalistic for you, then you probably aren't going to enjoy the community. (Note: dreamless.org is no longer active.)
){kind=link}
Figure 5 dreamless.org (level 2).
Which color scheme is right for your particular project? That, of course, depends on the project. Dark text on light background is the de facto standard. To achieve a more personal, inclusive feel, light text on a dark background sometimes works better. Whichever scheme you choose, be consistent about its application, and don't pick 50 different colors. This is HTMinimaLism, remember?