Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this course you'll get hands-on experience working on five typography projects. I will give you a preview of the finished projects in a moment. First, you should know that in this course I assume you have some experience with HTML and CSS, either in a text editor or in Dreamweaver. If you aren't familiar with the basics of HTML and CSS, you may find the exercises go a little fast for you. If that happens, I recommend watching a basic HTML and CSS course from the lynda.com Online Training Library first.
Second, you should know the type on the web is not a consistent creature. Your designing sites that will be seen on different platforms and at different resolutions. Unfortunately, type renders differently across browsers. The exact same font can look smoother, crisper, or even heavier in different browsers. Text looks slightly smaller or bigger and letter spacing look slightly tighter or looser. As with any element of web design, type should be checked across browsers and at different resolutions to see how it holds up.
Here's a page in Firefox. In Safari, we can see that our top navigation typography has gotten bigger and the links have broken. Third, keep in mind that this title does not require the use of one HTML editor over another. So you are welcome to use any authoring tool that you're comfortable with. I'll be using TextWrangler. But you'll be able to do these exercises in the Code View of Dreamweaver or any other HTML or text editor that you're familiar with. Now for our preview of the projects that you will do in this course.
The first project, Quiet/Loud, explores the possibilities of using our basic web-safe fonts to create emotion or meaning. The second project, Love/Hate, explores the possibilities of using free display fonts and the @font-face syntax to create emotion or meaning. The third and fourth projects are different explorations of the same text. In both cases we will start from this text shown with no CSS styling. One exploration we will end with this traditional elegant layout, using web-safe fonts.
The @font-face syntax is used to bring in a web font and we also add a background pattern. Along the way, we will talk about choosing different fonts to work together, creating hierarchy, and deciding where to put our links and how they should look. The other exploration will end with this, a more modernist layout using Google's web fonts. We also use a two column layout and ems instead of pixels for the measurement. Along the way we will also talk about choosing the different fonts to work together, creating hierarchy, and deciding where to put our links and how they should look.
We will also talk about choosing a single meaningful image to support the text. The final project takes you through the process of attending to typographic details, like hanging punctuation, using accented characters, and creating a drop cap. My goal for you is that by the end of this course you'll have been introduced to what typographers look for when setting type on the Web. Let's get started!
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66014 Viewers
61 Video lessons · 96626 Viewers
56 Video lessons · 110343 Viewers
82 Video lessons · 105125 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.