Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 apply our vertical spacing system to our serif bibliography. You need the biblio_serif_vspace.html and biblio_serif_vspace.css files from the Exercise folder. You will also need the fonts folder you created in Lesson 3 of this chapter, with the web font files for Chopin Script in it, for the font to continue to load properly. Make sure you drag a copy of the font folder into your Exercise folder and open up the HTML file in the browser so we can see what we're working with.
You can see the default vertical spacing system is still in use. In the last lesson I showed you a better system, specific to the needs of the text on this page. We are going to apply that system here. Open up the CSS file. First, let's take control of the vertical spacing system by zeroing out the default margins and padding. We do that in the universal selector. I'm adding a margin of 0 and a padding of 0.
This tells the browser to set all margins and padding to zero unless told otherwise. We no longer have to deal with the default spacing. We will save this file and review it in the browser. Our spacing is gone. So now what we need to do is go back in and add what we need. For the h1, we are not going to add any spacing. It lives in its own div and we will control whatever space we need by controlling the div later in the chapter.
For the h2 though we are going to add some things here. We are going to add a line height of 14 pixels. This sets the line height equal to the font size, so we won't get any extra vertical spacing. We are also going to add a margin top of 40 pixels and the margin bottom of 20 pixels. Again, I am choosing not to use shorthand.
You can if you already know how to use it. In the h3 we are going to change the line-height to 18 pixels. Oops! Actually up here I had it at 20. There is no reason to do it twice. I will just change it to 18 there and this will remove any extra vertical spacing for the h3. And then the next thing we are going to do is we are just going to take care of our p tag here and we want to keep the line-height as is and we will add a margin-bottom of 20 pixels.
Let's go ahead and save this and we can review it in our browser to see how it looks. It looks pretty good! You may have noticed that even though-- I want to point this out to you-- even though I added 20 pixels of space below the p tag and I added 40 pixels of space above the h2 tag, the space between them did not get bigger than expected. That is the space between the two of them is not 60 pixels.
It is not the sum of the two margins and this is due to something called collapsing margins. Browsers by default will collapse the margins when a bottom margin and a top margin are right next to each other. So instead of adding the two, the browser uses the larger of the two and ignores the small one. This drives some web designers nuts and some people think that this is a glitch. It's actually really good thing. As web typographers, collapsing margins are great. We don't have to worry about margins adding up then creating a big space.
It's exactly how a vertical spacing system is supposed to work. So I am looking at the design and there is one problem here and you have probably noticed it and that's that the author line, and I think it may be feels a little bit too close to the title about it and it definitely feels too far away from the resource description. And right now what's happening is this is a p tag and this is a p tag so our author has the same amount of space below it as the description. We need to go in and fix that and we are going to do that in the next lesson.
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.