Unique CSS3 Header Styles for Copyfitting Typography

by on 4th March 2013 with No Comments

Unique CSS3 Header Typography Styles tutorial

All of the newer properties emerging from CSS3 specifications have been immensely helpful in constructing more advanced UI designs. Webpages have been seeing a dramatic overhaul in the methods used to build typical layout styles. Notably typography and buttons/form elements are seeing the largest makeover – and with more developers launching open source projects there appears to be no end in sight.

For this tutorial I want to demonstrate how we can build a few sample headings into a basic webpage. I am using mostly CSS3 effects on the top navigation bar, along with the typography in the page. All of these techniques should carry over into the newer standards-compliant web browsers. Plus there are so many various design techniques you may duplicate and apply into any project. Be sure and check out my live demo to get an idea of what we are trying to build!

Live DemoDownload Source Code

Getting Started

I am first creating a simple index.html webpage using the HTML5 doctype. We only need a couple resources for styling, namely a unique stylesheet styles.css along with a few Google web fonts. Many people assume these resources will slow your page load speeds, and while we are requesting a few documents via HTTP it shouldn’t take more than a couple hundred milliseconds over a good connection.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>CSS3 Header Styles Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Rambla:400,700|Kavoon">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Now the page heading and body content is split up using a container class system. The navigation bar should span 100% of the page width, however the inner content maxes at 1050px. This will keep all of our content centered on the page no matter how big the monitor resolution. We keep the header inside an HTML5 nav element for more semantic styles.

<header id="topnav">
  <nav class="wrapper clearfix">
    <h1><a href="#">myWebpage</a></h1>
      <ul>
        <li><a href="#">Home <em>The Frontpage</em></a></li>
        <li><a href="#">About <em>Our Company</em></a></li>
	<li><a href="#">Work <em>Portfolio</em></a></li>
	<li><a href="#">Blog <em>Creative Writing</em></a></li>
	<li><a href="#">Contact <em>Send a Message</em></a></li>
      </ul>
  </nav>
</header>

It is worth pointing out how the heading text appears first in the HTML code, even though it is floated onto the right side of the navigation. Although we could format this to appear as though the heading comes after the navigation, for search engine crawlers we need to ensure that the page title comes first so it is ranked higher on the page. Also as the window gets smaller the responsive styles cause the nav links to drop below the header, so ultimately the heading should come first in the hierarchy.

The inner list item links are separated by text using the em tag. These smaller sub-headings are nice added effects onto a navigation if there is enough room. You can give visitors an extra sense of what is on each page without appearing overly-confrontational.

Inner Body Content

I haven’t included a lot of new content inside the body since we are focusing on typography. But there are 3 unique heading styles pushing from h1-h3 as ranked by importance. Some designers may choose to also include h4 and even h5 if necessary. Copyfitting typography is about working towards a tight-knit placement of content on the page. It’s about planning your written words and fitting other media around this context (images, video, etc).

  <div id="content">
    <h1>Introduction</h1>
    <p>Some typical Arrested Development Lorem Ipsum courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
	
    <p>Chicken fingers… with spicy club sauce. Yeah, like I'm going to take a whiz through this $5,000 suit. COME ON. I've always been <strong>deeply passionate</strong> about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. Are you at all concerned about an uprising?</p>

    <p>Are you aware of this? Coming soon. Indeed. Oh, yeah. The guy in the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. COME ON!</p>
	
    <h2>A Secondary Heading*</h2>
    <p><span class="pull-right">Excuse me, do these effectively hide my thunder?</span>My brother wasn't optimistic it could be done, but I didn't take "wasn't optimistic it could be done" for an answer. I need a fake passport, preferably to France... I like the way they think. You're losing blood, aren't you? Probably, my socks are wet.</p>

I think one of the coolest effects you may include is a pull-quote or blockquote design. Note these are two very different ideas and serve very different purposes. In our demo example I am using the CSS-Tricks pull-quote styles to demonstrate how we can duplicate content from areas in the page. These look excellent in blog posts or articles online where you want to emphasize certain phrases or sentences.

Blockquotes are another interesting design mechanism which can look great on almost any page. These do not relate to content within the post but are typically quoting somebody else. The quotes may come from past clients, colleagues, or really anybody to be honest. Codrops recently published an article on building modern block quotes which covers a series of great ideas for web designers.

Maneuvering with CSS3

The HTML markup is very standard and typical of what you would expect on any webpage. The more complex areas of interest reside in the CSS stylesheet where we can apply transition effects and tons of other great CSS3 properties. We should start out by taking a peek at the document page structure.

/* page display */
.wrapper { 
  display: block;
  margin: 0 auto;
  min-width: 480px;
  max-width: 1050px;
}

#topnav {
  display: block;
  position: relative;
  width: 100%;
  height: 66px;
  background: rgba(255,255,255,0.55);
  margin-top: 30px;
  margin-bottom: 45px;
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.35);
  -moz-box-shadow:  1px 2px 4px rgba(0,0,0,0.35);
  box-shadow:  1px 2px 4px rgba(0,0,0,0.35);
}

#container {
  display: block;
  min-width: 480px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

#container #content {
  padding: 11px 16px;
  background: #fffdf8;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

The .wrapper class should be supplied onto any container within another container. So for example our navbar extends the full width of the page, but all the content inside is contained inside a wrapper div. The outer #topnav container is using a slew of CSS3 properties coupled with the rgba() color selector. This is specific to web developers interested in using alpha-transparency within color hues.

We can see this effect not just on the background, but also on the box shadow as well. This effect goes well when using a fixed static navigation which scrolls down the page and follows the visitor.

#topnav nav h1 {
  display: block;
  float: right;
  font-family: 'Kavoon', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 3.0em;
  line-height: 66px;
  margin-bottom: 7px;
  font-weight: bold;
}

#topnav nav h1 a { 
  color: #46382b; 
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
#topnav nav h1 a:hover {
  text-decoration: none;
  color: #645343;
  background: #ebd6c5;
}

The page header is using a series of animated properties as you hover over the anchor link. This is also true of the many navigation items which are also utilizing alpha-transparency. Some older browsers do not support the typical vendor-prefix styles, but there are solutions for all browsers.

The header style fits so nicely because we can fix the navigation bar to a set height, and then use the line-height property for placing text centered vertically. So in this scenario even as we resize the browser window our page logo will always float along the center. Then once the navigation drops down we resize the line-height so everything fits accordingly. CSS3 animation effects just offer a more pleasing frontend experience for the user.

Responsive Trends

Much of the body content is already capable of handling mobile-responsive content. Over the past few years there have been a lot of articles written on responsive web design. Copyfitting your typography for both desktop and mobile platforms is possibly one of the greatest ideas you could follow. This allows anybody to access your information from any device with Internet access.

#topnav nav ul li {
  display: block;
  float: left;
  margin-right: 22px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#topnav nav ul li a {
  display: block;
  font-size: 1.4em;
  line-height: 1.3em;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0px #fff;
  color: rgba(80, 60, 60, 0.5);
  -webkit-transition: color 0.3s linear;
  -moz-transition: color 0.3s linear;
  -ms-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  transition: color 0.3s linear;
}

Notice how I have included transition effects on both the list items and the anchor links. Also we are selecting all the properties which should animate over time, which really isn’t necessary, but it looks fantastic. When the nav drops below the header all the margins and line spacing will re-adjust itself using animated transitions! Of course, only visitors using modern web browsers which support CSS3 transitions will see these effects. But it is worth keeping in regards to a successful user experience.

/* responsive nav */
@media screen and (max-width:770px) {
  #topnav nav ul li {
    margin-right: 15px;
  }
}

@media screen and (max-width:669px) {
  #topnav {
    height: auto;
  }
  
  #topnav nav h1 {
    line-height: 1.5em;
    padding-top: 8px;
  }
  
  #topnav nav ul {
    float: right;
    padding-top: 6px;
    padding-bottom: 9px;
  }
}

I’ve actually setup two different media queries for when the screen hits 2 different areas. First when we drop a bit below 800px then the navigation links remove some of their margins. This contracts the links closer together, saving on space and keeping them from dropping down too quickly. Then after we go below 700px the nav will switch beneath the header and we adjust for new line-height values.

This responsive design could be handled any number of ways. You could choose to simply hide the nav links and hold them tied onto a toggle link for mobile users. I feel this method is nicer for keeping all the typographic styles in point without sacrificing usability. The whole heading area is ripe for unique fitted typography and will certainly be a point of attention to users.

css3 typography styles in header designs preview demo

Live DemoDownload Source Code

Final Thoughts

I hope this tutorial may provide a deeper look into styling webpages using CSS3. Typography is still the #1 most important facet to any layout. The Internet allows people to send digital information across the world in very short bouts of time. Web designers are doing the work of messengers and couriers with some more pleasing aesthetics.

If you like the demo page feel free to download a copy of my source code as well. You may use this code with no licensing as public domain. Feel free to edit and copy these styles for any project, commercial or otherwise. Adding more resources online can provide just one more step for newer designers moving into the field. Additionally if you have any questions or comments please do share with us in the post discussion area.

Comments & Discussion

Subscribe

Membership
About the Author