Type on the web

September 08, 2006 | Be the first to comment

Understanding how to use type effectively in your web projects can make all the difference to the final product.

Traditional typography is an intricate and subtle form of design. Its history and theory can be studied over a lifetime, and the basics are a part of every graphic designer's tool set. Web typography on the other hand is new. For years, we could do no more on the web than choose from a few basic typefaces, and set a size for them to be displayed at. However, the adoption of CSS (Cascading Style Sheets) by browser makers has changed all that. We now have the ability to style and set type on the web in a way which was never possible before.

This tutorial begins with a bare-bones website layout, which we bring to life by adding content using some simple HTML code, and styling this content with CSS rules. Along the way, we show you some easy steps you should follow when choosing typefaces and using them on a website.

All you need is a text editor to edit the HTML and CSS, and a web browser to view the results. Before you begin, save the files from the 'Web type' folder on the CD to your computer, so you can edit and save them as you go along. It's also good to have a graphics editor such as Fireworks handy.

Click here to download the supprt files

Click here to download the tutorial for free

Want to learn more about CSS and JavaScript? Check out the top CSS and JavaScript tutorials and examples of CSS from our sister site Creative Bloq.