with Lorelle and Brent VanFossen

Our CSS Text Designs – Fonts, Text, Links, and Headings

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.

body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:1em; color:black; background:white}

p {
position:relative; margin:0; font-weight:normal; padding:8px 7px 10px 10px; color:black; font-size:100%}

<p>This is an example of our paragraph font.</p>

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

h1 {
position:relative; margin:0; font-weight:bold; font-size:130%; color:blue; padding-left:5px; padding-top:10px}

<h1>Headline One</h1>

Headline Two

h2 {
position:relative; margin:0; font-weight:bold; font-size:120%; color:navy; padding-left:5px}

<h2>Headline Two</h2>

Headline Four

h4 {
position:relative; margin:0; font-weight:bold; font-size:105%; font-style:italic; color:blue; padding-top:1.5em}

<h4>Headline One</h4>

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

h3 {
position:relative; margin:0; font-weight:bold; font-size:120%; color:blue; clear:right; padding-top:20px; margin-top:1em; border-bottom:1px #9999FF solid; background: url(images/core/h3summerphlox.jpg) right no-repeat}

<h3>This is the Spring Heading</h3>

Summer

h3 {
position:relative; margin:0; font-weight:bold; font-size:120%; color:blue; clear:right; padding-top:20px; margin-top:1em; border-bottom:1px #CCCC99 solid; background: url(images/core/h3summermud.jpg) right no-repeat}

<h3>This is the Summer Heading</h3>

Summer Two

h3 {
position:relative; margin:0; font-weight:bold; font-size:120%; color:blue; clear:right; padding-top:20px; margin-top:1em; border-bottom:1px #99CC99 solid; background: url(images/core/h3fern2.jpg) right no-repeat}

<h3>This is the Summer #2 Heading</h3>

Fall

h3 {
position:relative; margin:0; font-weight:bold; font-size:120%; color:blue; clear:right; padding-top:20px; margin-top:1em; border-bottom:1px #FFCC66 solid; background: url(images/core/h3fallbar.jpg) right no-repeat}

<h3>This is the Fall Heading</h3>

Winter

h3 {
position:relative; margin:0; font-weight:bold; font-size:120%; color:blue; clear:right; padding-top:20px; margin-top:1em; border-bottom:1px #9999FF solid; background: url(images/core/h3icebar.gif) right no-repeat}

<h3>This is the Winter Heading</h3>

Headings – Links and Resources

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

u, ins {
text-decoration:underline}

<u>This is underlined </u>

This is italic

i, cite, em, var {
font-style:italic}

<i>This is italic </i>

This is bold

b {
font-weight:600}

<b>This is bold </b>

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

tt, code, kbd, samp {
font-family:monospace; color:black}

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

 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. 
pre {
font-family:monospace; color:black; white-space:pre; font-size:80%; padding-left:10px}

<pre>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. </pre>

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.

.blue {
color:blue}

<p class=”blue”>Everything in this line is blue.</p>

This is Heading Two, normally blue forced to be red

.red {
color:red}

<h2 class=”red”>This is Heading Two, normally blue forced to be red</h2>

This is the code style which is now green.

.green {
color:#33CC00}

<code class=”green”>This is the code style which is now green.</code>

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

.darkgreen {
color:#006600}

.medium {
font-size:85%}

<p class=”darkgreen medium”>This is a combination of darkgreen color and medium font size.</p>

(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.)

.navy {
color:#000099}

< pre class=”navy”>This is pre font style
but the color is forced to be navy.</pre>

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.

.bold {
font-weight:bold}

<p class=”bold”>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.</p>

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:

<p class=”medium”>This is a medium-sized font.</p>

<div class=”medium”>This is a medium-sized font.</div>

<p>This is normal type with a <span class=”medium”>span of medium type </span> in the middle.</p>

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

This is tiny example of our paragraph font.

.tiny {
font-size:60%}

<p class=”tiny”>This is tiny example of our paragraph font.</p>

This is x-small example of our paragraph font.

.x-small {
font-size:65%}

<p class=”x-small”>This is tiny example of our paragraph font.</p>

This is small example of our paragraph font.

.small {
font-size:70%}

<p class=”small”>This is small example of our paragraph font.</p>

This is medium example of our paragraph font.

.medium {
font-size:85%}

<p class=”medium”>This is medium example of our paragraph font.</p>

This is large example of our paragraph font.

.large {
font-size:105%}

<p class=”large”>This is large example of our paragraph font.</large>

This is x-large example of our paragraph font.

.x-large {
font-size:115%}

<p class=”x-large”>This is x-large example of our paragraph font.</x-large>

This is xx-large example of our paragraph font.

.xx-large {
font-size:120%}

<p class=”xx-large”>This is xx-large example of our paragraph font.</xx-large>

This is big example of our paragraph font.

.big {
font-size:150%}

<p class=”big”>This is big example of our paragraph font.</big>

Resources for Fonts and Text

Font Sizes

Font and Text Characteristics

Font Design Elements and Techniques

Font Surveys and Usage: Choosing Fonts

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.

a {
color:#0000CC; border:0; margin:0; padding:0; text-decoration:none}

a:active {
text-decoration:none}

a[href] {
text-decoration:none}

a:visited {
text-decoration:none; color:#006699}

a:hover {
color:#003399; text-decoration:none; background:#CCFFFF; border-bottom:2px solid #003399; border-top:2px solid #003399; border-left:0; border-right:0}

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

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.

a.external:link, a.external:visited {
border-bottom:.05em dotted; text-decoration:none}

<p>This is an example of an external link to <a title=”external site” href=”http://www.cnn.com/” class=”external”>CNN</a>, the popular news site.</p>

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.

#footer {
clear:both; float:right; width:75%; padding:10px; color:#6633FF; font-weight:700; text-align:right; font-size:60%; border-top:1px solid blue}

#footer a {
font-weight:normal}

#footer a {
border-width:0 5px; border-left:solid white; border-right:solid white; color:#000099; background:transparent; padding:0 5px; text-decoration:none}

#footer a:visited {
color:#000099}

#footer a:hover {
border-width:0 5px; border:solid blue; background:#CCFFFF}

Our footer design which you can see at the bottom of this page in practice.

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

<div id=”footer”>
</div>

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

<div id=”footer”>
| <a title=”Home Page” accesskey=”1″ href=”../../index.html”>HOME</a> |
<a title=”Doing Zone” href=”../../doing.html”>DOING</a> |
<a title=”Being Zone” href=”../../being.html”>BEING</a> |
<a title=”Going Zone” href=”../../going.html”>GOING</a> |
<a title=”Living Zone” href=”../../living.html”>LIVING</a> | <a title=”Asking Zone” href=”../../asking.html”>ASKING</a> |
<a title=”Telling Zone” href=”../../telling.html”>TELLING</a> |
<a title=”Learning Zone” href=”../../learn.html”>LEARNING</a> |<br>

| <a accesskey=”6″ title=”Information about who we are and what we are doing” href=”../../about.html”>About Us</a> |
<a href=”../../learn/links.html” title=”External links and resources on nature photography, travel, writing, web design and more”>Links</a> |
<a title=”Article Reprint Request Information” href=”../../reprints.html”>Reprints</a> |
<a title=”Site Map” href=”../../sitemap.html”>Site Map</a> |
<a title=”Website Design Information and Resources” accesskey=”d” href=”../../doing/webdesign.html”>Design</a> |
<a title=”Our Legal Policies” accesskey=”8″ href=”../../doing/legal.html”>Legal</a> |
<a title=”Accessibility Information” accesskey=”0″ href=”../../doing/accessibility.html”>Accessibility</a> |<br>

| <a title=”Visit our Gallery of Images” href=”../../gallery.html”>Content and Photographs by Brent and Lorelle VanFossen</a> |<br>
<address>| <a title=”Call, email, or mail us” accesskey=”7″ href=”../../doing/contact.html”>Contact</a> | <a title=”our site home page” href=”http://www.cameraontheroad.com/”> http://www.cameraontheroad.com/ </a> |</address>
| <a title=”Copyright” href=”../../doing/copyrite.html”></a> |
</div>

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

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.

Post a Comment

Your email is kept private. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.