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.
In this lesson, we're going to fix the space above and below the author. This will help chunk the information about each resource. You need the bibliography_ serif_authorspace.html and bibliography_serif_authorspace. css files from the Exercise folder. You also need the fonts folder with the web font files for Chopin Script that you created in Lesson 3 of this chapter. Remember to drag a copy of the fonts folder into your Exercise folder so that Chopin Script will continue to load properly.
Open up the HTML file and let's see what we have here. You can see that the carefully created vertical spacing system is in place, but the space below the author is too loose and the space above the author is a little too tight. Why is this happening? Well, it's because the author information and the descriptions about the resources are both defined by a P tag, and this means they have the same margins. A bottom margin of 20 pixels and no top margin. And we need them to have different margins, but unlike H tags we only have one P tag to work with.
Theoretically, we could change the author to another H tag like an H4, but the author isn't really a heading. It's text. We just want it to look different from the other text. So semantically it's better if we keep it as a P tag, but how do we change it? Well, we're going to create a class with the spacing we need and apply it to the entire paragraph. So let's start in our CSS. We're going to create a class called author. .author. Remember always put a dot when you're creating a class and I do my curly brackets there.
And let's see, the spacing we want on it and we're going to add a margin-bottom of 5 pixels. I know we want to add a little space to the top, but we're not going to do it yet and I'll show you why in a few minutes here. We're going to save our CSS file and review. And it didn't work. Well that's because we created the class, but we didn't apply in the HTML. So let's go back and do that. In our HTML file, we want to add the class to our authors.
Earlier in the course, I showed you how to use a span tag to span a class around words we wanted italicized. You can see it here we use titles around the title, The Elements of Typographic Style. But we want to affect the entire paragraph here, so we don't have to use a span tag. We can use the tag we're already using and add the class here, class="author". Again, I put that in quotation marks because I made up the name author and the browser needs to know what class to go find and use.
So while we're here, I'm going to go ahead and copy this and let's do all the authors in the first section. That will help us see whether or not the spacing is good. You'll also notice I didn't have to end the class since the class is associated with the p tag. It will end when the p tag is ended. Okay, now let's save this and review it in our browser and there we go. It tightened up a little. You can see that now. The space between the author and the text, between the author and the text, it's tighter than the spacing between the different sections there, between the different resources. Great! We also need to add a little bit of space above the authors' names and we're not going to add it to the author itself.
What we're going to do is add a little space below our h3 here. I'm going to show you why. If we scroll down-- and these look wonky because we didn't do all the authors yet-- but if we go down let's see on A List Apart Magazine, it does not have an author and it's too tight to the text underneath it. So what we're going to do is we're going to actually add the space just below our h3 and then that way it will work whether there is an author's name after the title or if there is not an author's name after the title.
So let's go and do that now. We need to be in our CSS, on our h3. We are going to add a margin-bottom of 2 pixels. Go ahead and save that and we can review it in our browser with a refresh and excellent. You'll see here there is a little bit more space between A List Apart Magazine and its description. I'm going to scroll all the way up to the top where authors look good. There we go, we got a good spacing here. Not too tight, not too loose. It's looking good.
What you're going to do is go through and add the class= author to all of the paragraphs containing the author information for the rest of this document and when you're done, your vertical spacing will be done for the serif bibliography.
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.