Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

The Font Attribute

CSS provides us with the Font attribute, which is what allows us to tweak the text on our page. This is an overview of the syntax and how to effect text using CSS.

Font-size

Change the size of your font using font-size

     font-size: 1.2em;
     font-size: 12px;
     font-size: 10pt;

Live Preview

1. Font size is set to 1.2em.
2. Font size is set to 12px.
3. Font size is set to 10pt.

Font-weight

This is used to change the weight of your font (i.e bold, bolder)

     font-weight: normal;
     font-weight: bold;
     font-weight: bolder;
     font-weight: lighter;

Live Preview

1. Font weight is set to normal
2. Font weight is set to bold
3. Font weight is set to bolder
4. Font weight is set to lighter

Text-transform

The text-transform property allows you to apply uppercase, lowercase, and capitalize effects to your text.

     text-transform: capitalize;
     text-transform: uppercase;
     text-transform: lowercase;
     text-transform: inherit;

Live Preview

1. Capitalizes the first letter in every word
2. Allows your html to be lower case the converts it all to uppercase characters
3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS
4. inherits the text-transform property from its parent element

Text-decoration

The text-decoration property allows you to underline, overline and put a line through your text

     text-decoration: normal;
     text-decoration: underline;
     text-decoration: overline;
     text-decoration: line-through;
     text-decoration: blink; (DO NOT USE)

Live Preview

1. Text decoration set to normal
2. Text decoration set to underline
3. Text decoration set to overline
4. Text decoration set to line-through
5. Text decoration set to blink ( Only works in Firefox and Opera )

Font-Variant

The Font variant property allows you to create the small-caps effect which capitalizes the letters then decreases the font size.

     font-variant: normal;
     font-variant: small-caps;
     font-variant: inherit;

Live Preview

1. Font Variant set to normal
2. Font Variant set to small-caps
3. Font variant set to inherit

Creating Drop Caps

Creating drop caps is easy with CSS. There are multiple ways to create the drop cap effect but I am going to show the most efficient way. To create them use the :first-letter pseudo-element which only effects the first character of a given element.

<p class="dropcaps">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

p.dropcaps:first-letter {
      	font-size: 340%;
	margin: 8px 5px 0px 0px;
	float: left;
	font-weight: bold;
	width: 1em;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Creating Attractive Paragraphs

For more attractive paragraphs use Robert Bringhurst’s method which states: Take your font size and multiply it by 30 to get the width of your paragraphs.

For example if your font size is 12px, multiply it by 30 and you get 360px which should get you approximately 65 characters per line.

Incorrect Measure

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct Measure

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Line-height Examples

Line height dictates the amount of space in between each line of text. A good rule of thumb is to make the line height 6-7px bigger than your font-size.

For example if your font size is 12px, add 6px to the font size and you get your line height, which would be 18px.

Incorrect Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Cleanly Emphasize Text

Underlines should only be used on text that is linking to something or somewhere. Italicizing text is a cleaner alternative.

Incorrect example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Looking forward – CSS3

There are already some exciting features that you can incorporate into your designs dealing with type in CSS3. Of course some of these new features do not work in IE, but your probably used to nothing working in IE anyway so give these a shot.

@Font-face

@font-face allows you to upload a raw font file to your web server and link to it in your external CSS file, then apply it to any type on your site.

This feature is the biggest one dealing with type, but along with it’s upside comes its downside. There are only a few fonts that you are “allowed” to use because of licensing issues. The fonts that are CSS3 safe can be found here.

Usage of @font-face

In this example I put a folder in the root of my server called font. First you need to declare the @font-face attribute which imports your font file and then you can use the font name to effect any other elements.

/* Declaring the font */

@font-face {
      src: (font/diavlo.otf)
}

/* Applying the font to an element */

h1 {
      font-family:  diavlo, Arial;
}

Text-Shadow

The text shadow attribute takes away the need to create drop shadows for certain elements in photoshop and gives you dynamic drop shadow control. Of course this attribute is only supported in Safari, Chrome, Firefox and Opera.

Example Heading

p {
      font-size: 2em;
      font-weight: bold;
      color: #777;
      text-shadow: 1px 1px 1px #222;
}

Example Heading 2

p {
      text-shadow: 2px 2px 2px #222;
}

Example Heading 3

p {
      text-shadow: 1px 1px 5px #FFF;
}

The Challenge

The techniques in this article are just guidelines. Take them and implement the features you like into your web designs. Typography is extremely important and can absolutely ruin a beautiful design. Don’t let that happen to you bookmark this guide!

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. He has a unique passion for design trends and tutorials. Reach him through the Contact page or follow him on twitter @ThreeStyles