Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
So far we have styled our heading using an h1 tag. Our text is styled with P tag. These tags automatically add a line break when we use them. What if we want to style a word or words without adding a line break? We create and use a class. In this lesson you will need biblio_ serif_class.html and biblio_serif_class.css from the exercise folder. Open up the HTML page in the browser. The headlines are italic. But you will see the names of the resources are not italic and they should be.
We are going to fix that with a class. Open up the CSS file and create a class. All classes start with a dot. Let's call this one titles because we are going to use it for our titles. We need our curly brackets and we are going to tell the titles to be font-style: italic. Notice we don't add anything else to the class. We are adding an italic to the text but nothing else. The resource titles will still use the font family from universal selector as well as the font size from the p tag when we set that.
Right now it's still at a default size. A common question I get for my students is what's the difference between a class and a tag? Well tags are standard and recognized. All browsers know what an h1 is and all web designers now what an h1 is. They have default styling. They are part of the backbone of CSS. Classes on the other hand are something you make up to meet your needs. When you put a dot in front of a class browsers will now hey I need to pay attention to the styling here. It's not a tag but it's going to be used to style something in the HTML.
Another difference is how we apply the styling in the HTML. Let's save this and open up our HTML. We want to make the elements of typographic style italic, but we are not going to wrap it with a class tag. There are two different ways to apply a class in the HTML. We are going to use what's called a span tag. In front of the title here, The Elements of Typographic Style, we will start our span tag, using > at the end of the Typographic Style, Elements of Typographic Style will end our span tag.
So we are spanning this title. We are going to span it with our class. So go back to the start of that tag there and add class = titles. I am going to go back and double-check and make sure that I called it titles with an S and I did. Notice I did not add the dot in the HTML. You don't use it here. You only use it in the CSS. Notice I did use quotation marks and that's because I made up the word titles and here I am telling the browser to pay attention to the class that I made up and then I called titles.
I am going to save this and let's view it in our browser. Refresh it and you can see the title is now italicized. We didn't add a line break and we can use this class over and over as we need to. If we had another title we could italicize it as well. So in this lesson we created and applied a class. Classes are powerful tools for typographers. We can use them to style words and sentences when we don't want to create a line break. We can also use them to style a single letter or a whole paragraph if we want these elements to look different from the other letters or paragraphs on the page.
In the next lesson we will look at how to choose a second font, which we will then use to replace the h1 that we have set here.
Find answers to the most frequently asked questions about Typography for Web Designers.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.