Create Attractive Web Typography with CSS3 and Lettering.js

    written by Nikola Lazarevic

    CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties the possibilities are becoming more and more diverse!

    In this tutorial, we’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical Web Typography.
    To make things a bit interesting and less boring, instead of just using meaningless placeholder text I will use text from Jules Verne’s “Moon-Voyage” book, chapter X. The Observers of the Moon. So, let’s get started.

    Design

    Let’s take a look at what we are going to create:

    Attractive Web Typography - Preview

    Demo

    Check out the demo!

    Source files

    The HTML

    Before we start any styling, we are going to need some HTML markup first. For our purposes here, we’re going to be using some pretty plain markup.
    As you can see from the markup below, we are technically using HTML5, with its simple DOCTYPE declaration, but we will continue using old school <div> elements instead of using <article> or <section> elements.

    <!DOCTYPE HTML>
    <html>
       <head>
    	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>The Observers of the Moon | Demo</title>
    	  <link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
       </head>
    <body>
    	<div id="container">
    		<div id="main">
    			<h1>The Observers of the Moon</h1>
    			<p>
    				<span class="dropcap">T</span>he first observer of the moon was <a href="#">Galileo</a>. His poor telescope only magnified thirty times. Nevertheless, in the spots 
    				that pitted the lunar disc &ldquo;like eyes in a peacock's tail,&rdquo; he was the first to recognise mountains, and measure some heights to which he attributed, exaggerating, an elevation equal to the 20th of the diameter of the disc, or 8,000 metres. Galileo drew up no map of his observations.
    			</p>
    			<p>
    				A few years later an astronomer of Dantzig, <a href="#">Hevelius</a> - by operations which were only exact twice a month, at the first and second quadrature-reduced Galileo's heights to one-twenty-sixth only of the lunar diameter. This was an exaggeration the other way. But it is to this <em>savant</em> that the first map of the moon is due. The light round spots there form circular mountains, and the dark spots indicate vast seas which, in reality, are plains. To these mountains and extents of sea he gave terrestrial denominations. There is a Sinai in the middle of an Arabia, Etna in the centre of Sicily, the Alps, Apennines, Carpathians, the Mediterranean, the Black Sea, the Caspian, &amp;c.-names badly applied, for neither mountains nor seas recalled the configuration of their namesakes on the globe. That large white spot, joined on the south to vaster continents and terminated in a point, could hardly be recognised as the inverted image of the Indian Peninsula, the Bay of Bengal, and Cochin-China. So these names were not kept. Another chartographer, knowing human nature better, proposed a fresh nomenclature, which human vanity made haste to adopt.
    			</p>
    			<p>
    				This observer was <a href="#">Father Riccioli</a>, a contemporary of Hevelius. He drew up a rough map full of errors. But he gave to the lunar mountains the names of great men of antiquity and <em>savants</em> of his own epoch.
    			</p>
    		</div><!--main-->
    		<div id="footer">
    			<p><a href="#">The Moon-Voyage</a> by <a href="#">Jules Verne</a> <br />Chapter X: The Observers of the Moon</p>
    		</div><!--footer-->				
    	</div><!--container-->	
    </body>
    </html>
    

    You may also notice that I’ve truncated the article text beacuse there’s no need to reproduce the entire article here.

    Attractive Web Typography - HTML

    CSS Reset

    CSS Reset removes all the default padding and margins from elements and then, depending on the reset that you use, applies some basic stylistic treatments to different elements.
    For this tutorial we will be using famous Eric Mayer’s Reset CSS v2.0

    /* Reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    

    Basic Style

    Let’s start with applying some basic styles to <body> tag.

    body {
    	background: #1d092a url('../img/body_bg.jpg') repeat-x top left;
    	font-family: Arial, sans-serif;
    	color: #fff;
    	font-size: 10px;
    	line-height: 1.4em;
    }
    

    We added image to <body> tag, repeating along X axis, and we also give a dark purple color to <body> background.
    We set basic typeface to Arial, default font size to 10px, line height to 1.4em and color to white. We won’t actually render any text using Arial and this small, but don’t worry we will change this in next step.

    #container {
    	width: 1140px;
    	margin: 0 auto;
    	position: relative;
    	background: url('../img/moon.png') no-repeat 200px top;
    	padding: 100px 0 20px 0;
    }
    
    #main {
    	margin: 0 166px 0 65px;
    	border-bottom: 1px solid #000;
    	padding-bottom: 20px;
    }
    

    By measuring in Photoshop, we come up with numbers for #container and #main divs.

    Using @font-face

    Let’s add in some extra typography styling using web fonts. I used 3 different fonts in my design: Fanwood, Deftone Stylus and Museo Sans 500.
    You can pick up #font-face kit for Fanwood from Font Squirrel, for Museo Sans 500 from Fontspring and for Deftone Stylus you have to use @font-face Kit Generator from Font Squirrel.
    Download Deftone Stylus and then use @font-face Kit Generator to create @font-face kit.

    /* font-face rules */
    @font-face {
        font-family: 'FanwoodRegular';
        src: url('../fonts/Fanwood-webfont.eot');
        src: url('../fonts/Fanwood-webfont.eot?iefix') format('eot'),
             url('../fonts/Fanwood-webfont.woff') format('woff'),
             url('../fonts/Fanwood-webfont.ttf') format('truetype'),
             url('../fonts/Fanwood-webfont.svg#webfontVVl9NZdu') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'FanwoodItalic';
        src: url('../fonts/Fanwood-Italic-webfont.eot');
        src: url('../fonts/Fanwood-Italic-webfont.eot?iefix') format('eot'),
             url('../fonts/Fanwood-Italic-webfont.woff') format('woff'),
             url('../fonts/Fanwood-Italic-webfont.ttf') format('truetype'),
             url('../fonts/Fanwood-Italic-webfont.svg#webfont8A3Pbj4g') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'DeftoneStylusRegular';
        src: url('../fonts/deftone-webfont.eot');
        src: url('../fonts/deftone-webfont.eot?iefix') format('eot'),
             url('../fonts/deftone-webfont.woff') format('woff'),
             url('../fonts/deftone-webfont.ttf') format('truetype'),
             url('../fonts/deftone-webfont.svg#webfontmAMOidpF') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'MuseoSans500';
        src: url('../fonts/MuseoSans_500-webfont.eot');
        src: url('../fonts/MuseoSans_500-webfont.eot?iefix') format('eot'),
             url('../fonts/MuseoSans_500-webfont.woff') format('woff'),
             url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'),
             url('../fonts/MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    

    We have our web font attached to our CSS and ready to use.

    Paragraphing

    In this step we will styling the biggest part of the document – paragraphs.

    p {
    	font-family: 'FanwoodRegular', Georgia, sans-serif;
    	font-size: 2.1em;
    	line-height: 1.6em;
    }
    

    Let’s set font-family to FanwoodRegular, increase font size to 2.1em (2.1 x 10 = 21px) and readjust the line height to 1.6em.

    p + p {
    	text-indent: 1.5em;
    }
    

    This selector means that the style applies only to paragraphs directly following another paragraph, so all paragraphs, except the first one will be indented.

    Attractive Web Typography - Paragraphing

    Instead of creating faux italic on ‘FanwoodRegular’, I defined style for <em>.

    em {
    	font-family: 'FanwoodItalic', Georgia, sans-serif;
    }
    

    Attractive Web Typography - Paragraphing

    Styling Links

    Next, we’ll style our links.

    a {
    	text-decoration: none;
    	color: #ffa300;
    	-moz-transition: color 0.2s linear;
    	-webkit-transition: color 0.2s linear;
    	-o-transition: color 0.2s linear;
    	transition: color 0.2s linear;
    }
    
    a:hover {color: #ff0000;}
    

    Here we set our link color to orange (#ffa300) and remove the standard underlining. We’ll also set a hover state – link color will change to red (#ff0000) when a user hovers over a link.
    By using CSS3 transition property we achieved a much smoother look by gradually fading from one color to another.

    Note that we used selectors: -webkit, -moz and -o to target different browsers.

    Attractive Web Typography - Styling Links

    Dropcap

    The first letter in first paragraph (T) needs to be styled different.

    span.dropcap {
    	float: left;
    	display: block;
    	font-family: 'MuseoSans500', Arial, sans-serif;
    	font-size: 3.273em;
    	color: #a77d33;
    	text-shadow: 3px 3px 0 #000;
    	margin-top: -10px;
    }
    

    We applied ‘MuseoSans500′ to letter T, adjust the font-size, color, top margin and add drop shadow using CSS3 text-shadow property.
    The syntax includes figures for the X-offset, the Y-offset, the blur amount and finally the color of the actual shadow.

    text-shadow: x-offset y-offset blur color;
    

    Attractive Web Typography - Dropcap

    Article Heading

    First let’s apply some basic styling to <h1>.

    h1 {
    	font-size: 55px;
    	margin-bottom: 139px;
    	color: #fff;
    }
    

    We set color to white, readjust the font size to 55px and set the bottom margin to 139px.

    Attractive Web Typography - Paragraphing

    Here comes the fun part – fancy web typography with the help of lettering.js – jQuery plugin for radical Web Typography.
    Grab lettering.js from here, then link jQuery library and ‘lettering.js’ in header of HTML document.

    <!DOCTYPE HTML>
    <html>
       <head>
    	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>The Observers of the Moon | Demo</title>
    	  <link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
          <script src="js/jquery.lettering-0.6.min.js" type="text/javascript"></script>
    </head>
    

    Lettering.js will allow us to wrap the lines of text, but first we need to break <h1> to lines by adding <br /> tag.

    <h1>The Observers of the <br /> Moon</h1>
    

    Then we will apply id to <h1> so we can target it with javascript.

    <h1 id="title">The Observers of the <br /> Moon</h1>
    

    Then we’ll add a script block in header.

    <script>
    		$(document).ready(function() {
    		  $("#title").lettering('lines');
    		});
    </script>
    

    The resulting code will break #title to two lines of text and output the following:

    <h1 id="title">
    <span class="line1">The Observers of the </span>
    <span class="line2"> Moon</span>
    </h1>
    

    Now we can style both span classes the way we want.

    #title .line1 {
    	font-family: 'DeftoneStylusRegular', Verdana, sans-serif;
    	font-size: 1em;
    	color: #a77d33;
    	display: block;
    	line-height: 1em;
    }
    
    #title .line2 {
    	font-family: 'MuseoSans500', Arial, sans-serif;
    	font-size: 3.2em;
    	line-height: 1em;
    	margin-left: 65px;
    	text-shadow: 5px 5px 0 #493854;
    	display: block;
    	text-transform: uppercase;
    }
    

    Voila!

    Attractive Web Typography - Article Heading

    Footer

    We’re almost there.

    #footer {
    	text-align: center;
    	margin: 0 166px 40px 65px;
    	border-top: 1px solid #2f0f44;
    	padding-top: 15px;
    }
    
    #footer p {
    	font-size: 1.4em;
    	letter-spacing: 0.1em;
    	color: #7c7c7c;
    	font-variant: small-caps;
    }
    

    Attractive Web Typography - Footer

    Attractive Web Typography - Preview

    Conclusion

    That’s all! I hope that you’ve enjoyed it and been inspired with how a simple and attractive design can be achieved with CSS and with few images only. With increasing support for CSS3 goodness, the possibilities are becoming more and more diverse!

    Demo

    Check out the demo!

    Download source files:

    Looking for rental properties try Alameda real estate agent.

    You can get our complete MB3-208 exam pass resources including our latest MB6-282 training courses. Our 70-690 and testking mcse are also playing vital role in IT world.

    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

8 Comments
ADD COMMENT
  • Don says:

    March 16, 2011

    First: I can’t see what I’m typing here, your comment area doesn’t really work…

    Second: You don’t use lettering.js ANYWHERE in here, besides calling it. You haven’t used the char feature (which is the feature that it’s build for!) in your css, you haven’t really used lettering.js.

    Explain how this is lettering.js AND css3. Hell, I don’t particularly see any css3 in this. Ohh, text-shadow, that’s really css3-y (well, it is technically css3, so I suppose you can technically call this css3, but still no lettering.js)

    Oh, I see the lettering.js, something NOT DYNAMIC that DOESN’T need to even use lettering.js (your line thing, I mean really, that would be easier to just hard code the classes for that). I mean, if you’re really going to show off lettering.js, you should show off how you can use words, and letters (which was the original function, by the way).

  • vale says:

    March 16, 2011

    I love the typography you did for this (maybe except for the red color for hovered links), and the tutorial is awesome. The fading effect for the hover state of links is great too.

  • Sun Pietro says:

    March 16, 2011

    You use span for writing text in italic instead of using or which is semantically much more appropriate. Where is lettering.js?

  • Gaspard Beernaert says:

    March 17, 2011

    You should suppress line 105 on http://webexpedition18.com/download/the_observers_of_the_moon_demo/style/style.css

    #container {
    width: 1140px;

    This makes annoying scrollbars for people than do not browse in fullscreen mode (960px is the standard)

  • Jesse says:

    March 17, 2011

    Oh PLEASE justify the paragraphs!

  • Mark says:

    March 23, 2011

    Thanks Nikola

    Everyone’s an expert but thanks for the article

  • Keith says:

    March 23, 2011

    I think it would be beneficial to mention here taht the reason for not post-loading lettering.js is a preventative measure against FOUT (flash of unstyled text). Otherwise, that could be interpreted as an performance degrading antipattern.

    • Keith says:

      March 23, 2011

      Sorry for the typo (“taht”). And I’d also like to chime in and say thanks for the article – I especially like the hover fade on the links.