Our articles on web page design cover a wide range of topics, all focused on designing web pages with Cascading Style Sheets (CSS). In this series, we focus on designing the smaller elements, the design elements found on a web page. You can find even more aggressive and unique designs in our CSS Experiments that might suit your web page design. Let’s start this section with fonts, text, links, and headings, the content design elements.

Fonts

Many of our designs began as CSS experiments, some trial and error before we found out what worked for us. So we are sharing with you some of the techniques that go into creating these pages and our CSS, HTML, and web page design elements.

We like to keep our site content simple and clean with good use of space. More importantly, our site is designed to be as user-friendly and accessible as possible. We want our site viewed by everyone and everything, from the blind and visually impaired to small handheld computer screens. Therefore, we set a base font and the rest of our fonts are set by percentage or fraction, allowing the user to override our font-sizes to accommodate their viewing needs.

Use also use a variety of similar fonts in our font-family list to increase the odds of the font we prefer showing up on the page. Fonts are only visible when the user has those fonts installed upon his or her computer. We always include a generic font reference to serif or sans-serif to ensure a specific look if not a specific font as a fallback.

This is an example of our paragraph font.

Headings

For the most part, our headings are simple and consistent throughout our site. As nature photographers, it was important that we present a very simple background and text format so our photographs would jump off the page with color and artistic and dramatic license. Therefore, we kept to a simple blue and white theme. Yet, as simple as the design is, within that theme there are shades of blue to add a little more impact.

Headline One

Headline Two

Headline Four

We decided to feature a bit of jazz in our H3 heading design. We use the H3 selector frequently in our articles to separate content into easily consumable sections. The H3 style sheet rules set the color and style of the text, then adds a line that goes across the page. At the end of the line along the right margin is a small photograph of ours. To add some variety, we change the picture and the color of the horizontal line dependent upon the seasons.

Spring

Summer

Summer Two

Fall

Winter

Headings – Links and Resources

• Rubber Headers **
• Using Background-Image to Replace Text
• Designing 50+ Web Pages: 50+ Headings
• Desilva’s Headings Side by Side
• Making Headlines with Cascading Style Sheets
• HTMLDog’s Headings
• About.com’s Web Design: HTML and Headings (Technical Specifications)

Text Characteristics

Throughout a web page there will be text elements you want to look a certain way. This includes links, but we’ll get to those in a minute. Specifically, these are the occassional bit of color or an impact of bold or italic, or a positioning move to make the text look the way you want it to look. Here are a few of ours:

This is underlined

This is italic

This is bold

This is code or keyboard style and it is an inline code which can sit inside of regular text.

 This is pre, another form of code or keyboard style but it follows the formatting on the HTML sheet and doesn't wrap or sit inline with the regular text. 

Special Text Classes

There are times when you want a certain line of text to stand out and look different from the rest, or a box border to change from blue to green. We’ve created a range of class selectors which change the color of all the selectors within the class. We use this occassionally to provide emphasis.

Everything in this line is blue.

This is Heading Two, normally blue forced to be red

This is the code style which is now green.

This is a combination of darkgreen color and medium font size.

(Note: We used a shorthand combination of two classes in this example. You can find more about this in our section on CSS shortcuts and shorthand.)

 This is pre font style but the color is forced to be navy. 

There are times when we want something to be forced to be bold even though it isn’t normally, so we have a class selector set to be bold.

Font-Size

When the design calls for it, we will change the size of the fonts. Rather than using forced font sizes, such as 14pt, we use relative sizes based upon the default font size which is set at 1em, approximately 12pt. The variable relative font size is represented by a percentage or fraction of the default. Using relative font sizes allows users with their own style sheets to overwrite ours for their special needs, and it allows flexibility for those who require larger or smaller fonts for better reading, controlled by the Internet browser (From the menu, VIEW, FONT-SIZE).

There are various ways to use these special sized fonts. They can be set in classes to be used with divisons or spans. Here is an example of each:

Let’s look at the specific CSS rules for a few of our special font sizes.

This is tiny example of our paragraph font.

This is x-small example of our paragraph font.

This is small example of our paragraph font.

This is medium example of our paragraph font.

This is large example of our paragraph font.

This is x-large example of our paragraph font.

This is xx-large example of our paragraph font.

This is big example of our paragraph font.

Resources for Fonts and Text

Font Sizes

• W3c’s Care With Font Size
• CSS A List Apart: Size Matters
• BIG BAER Explains CSS Font-Size
• MIS: Using Relative Font Sizes
• WebDevRes: CSS Font Size Control and Recommendations

Font and Text Characteristics

• The Noodle Incident’s CSS and Text
• W3 Schools: CSS Fonts
• About.com’s Web Design (CSS): What is a Font
• The Noodle Incident’s Tutorial on Typography
• HTMLHelp’s Font Properties
• HTML Source: Text Formating
• University of Minnesota Creative Standards Guide: Text and Fonts

Font Design Elements and Techniques

• About.com’s Web Design: How Many Fonts are Too Many
• Web Page Design for Designers: Typography
• Blogdrive’s CSS Definitions and Examples
• Cascading Style Sheets Interactive Tutorial for Beginners – Fonts and Text
• Pixel Fonts

Font Surveys and Usage: Choosing Fonts

• Codestyle’s Windows Web Font Survey Results
• Codestyle’s Font Survey For All Platforms
• Web Style Guide: Typefaces

Designing Our Links

We wanted our links to blend into the content of the page while still standing out. But we also wanted them to be clearly recognized as links when the mouse hovers over the link.

Move over the link to see it in action – http://www.cameraontheroad.com/index.html

External Links

We feature several thousand links to sites away from our own. Part of compliance with web and accessibility standards is designating which links are internal and which are external. External links will take the user away from your site. Because we have so many external links as part of the overall flow of our articles, we decided to clearly mark all external links with a dotted blue line underneath the link, a technique becoming very popular among web designers. Our policy states that these links will open in a new window, leaving our article still accessible to the user so they can continue to read on and not let the flow of the article be lost while still accessing the external information.

Because we set the overall look of the links previously, the external class rule merely adds the modification of a bottom dotted border for both the link and visited link.

This is an example of an external link to http://www.cnn.com, the popular news site.

Designing Our Footer Links

Our footer features some interesting links and hovers, adding a little drama to our page design. As mentioned, we want our links to stand out when the mouse passes over them (hover) but we wanted something a little different with our footer.

The hover links within our content feature a light blue color with a top and bottom border of dark blue (Move the mouse over any links in this paragraph to see the design). We changed this in our footer to create the same light blue background of color but with dark blue borders on the left and right sides of each hover link instead of the top and bottom. It is still consistent but different, adding a bit of fun to the design.

This is the HTML structure for the footer without our links.

This is the HTML structure for the footer with our footer links.

Note: Notice the references to accesskey. These are the tab order in which someone can tab through a page to the most important links. These were left in to remind you to create accessible pages to comply with web standards. The order of the accesskeys is based upon your own design.

Resources About Links

• Jakob Nielsen’s Alertbox: Change the Color of Visited Links **
• Jakob Nielsen’s Alertbox: Guide for Visualizing Links
• Accessify’s List-o-Matic – Link List Wizard
• Links: No Underline
• The impact of links and link text on search engine placement
• Colly Logic’s Question Time: Visited Links
• Should visited links get distinctive styling? ***
• Same Link – Different Colors
• Desilva’s CSS Links
• CSS and the Amazing Technicolor Anchors
• Cascading Style Sheets Interactive Tutorial for Beginners – Links
• HTMLSource: Basic Links ***
• W3 Schools: HTML Links
• Simon Willison’s Weblog: Fun With Links
• WebDevRes: Link Colors by Section
• Westciv’s Complete CSS Guide: Link Pseudo Class Selectors
• Jessett.com’s Link Styles
• Spoono’s Link Designs
• Kali’s Web Shoppe Text and Link Rollovers
• About.com’s Web Design: Styling Links with CSS
• eei.press’s It’s All In The Links: Readying Publications for the Web
• Links Want to Be Links
• The Search for the Missing Link
• Websitetips’ CSS and Links

Want More?

In our first section, we examined the innovative layout that we developed for our web pages. In the next section, we tackle the graphic fun of lists and boxes to add drama to your design. Then, we show you some of the little details we use to make our pages look special including the use of invisible text, forced white space, floats, and dealing with Internet browser software bugs. Our last section on CSS and HTML is on the tips and tricks we learned while changing and updating these pages.