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 add our links to the traditional bibliography. You need the files biblio_serif_navlinks. html and biblio_serif_navlinks.css 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 the last chapter, applying a system of hierarchy in HTML and CSS. The fonts folder should still be on your desktop. If you're just joining us or need to recreate your fonts folder and would like a refresher on how to download and organize web fonts from fontsquirrel.com, see Chapter 1, Lesson 7, Downloading web fonts, from earlier in this course.
Keep a copy of the fonts folder on your Desktop. You'll need it for the rest of the course. But for this lesson, put a copy in the Exercise folder. That way Chopin Script font will continue to work. Open up the HTML file in the browser and you can see what we're working with. I've already moved the main heading into its new position, so we can focus on the links. All I did was remove all the margins around the heading container. It's a little close to the top now, but we'll fix that later when we figure out the space around the whole page.
You'll see I've added the text for the links in a div to the left of the text. I also added some padding in the top of this new div, so the links line up with the first resource title. This helps the h2 stand out even more. It sort of pops up above the horizon. But they're not a list of links yet and they all run together. We'll need to fix this. We're going to do that by making the links an unordered list. In your HTML file, we're going to make the links an unordered list.
We use the tag ul for unordered list. Each link within the list is a line item or a list item. We use the tag li for list item and we need to apply those tags on each of the four links here and I'm just copying and pasting. It's quicker and it reduces errors.
I can save this and review it in my browser. Excellent! You see now that the links are a list. If you're familiar with using an unordered list, there is something that's not here that you would expect to see and that's bullets. Unordered lists usually have a bullet on each item and you might be asking yourself, why aren't they showing up, and I'm going to show you. You can follow along and do this part with me or you can just watch while I show you what's happening. In my CSS, I've gone to my universal selector. I've added margin and padding set to 0.
I'm going to cut that just for now and save it and review my web page. So the space is kind of wonky and you can also see that the bullets have shown up. They were hidden. They were outside the visible area of the navigation div that that list lives in. So we're going to go back and put the margin and padding of zero back in, because that's how we want it to be. And we can refresh. Let's see here. I'll save this. Back into my browser, refresh, and you can see that the bullets are gone.
This looks like we're fine and we don't even have to think about bullets at all. But I wouldn't do that and I'm going to show you why. What if at some point in the design we decide to add a left padding to our navigation container? We'll go down here to my nav_container and just for now I'm going to add a padding-left of 20 pixels. I can save this and let's go back and see what happens to our web site here. Besides everything moving around on us, you can see that those bullets are back. So even if I can't see the bullets because of my zero margin and padding in the universal selector, I like to turn them off anyway.
I don't have to worry about them popping up in different browsers and I don't have to think about them later if I play around with padding and margins on a div. So what we're going to do is we're going to go in and get rid of the bullets for good. So what we need to do is we need to style our unordered list. I'm going to add that down at the bottom here. And I start with a ul for unordered list and remember my curly brackets and I'm basically going to type in list-style: none, and that's going to get rid of those bullets.
Let's save this and review in the browser again. And there they are. I mean, well, there they aren't. they're now gone. That's great! So let's get rid of that extra padding I put in. That was up in the nav_ container, get rid of that, save it. And whenever I'm messing around with my syntax, I always go back and review it and make sure that it's gone. So now we've gotten rid of the bullets. Everything looks great. we have to actually make these links into links, they're not links yet, and we're going to be doing that in the HTML.
And these links are going to link to different parts of the page. They're not going out to external pages. So we're going to have to do this in two parts. First, we're going add some named anchors. Those are the places on the page that the links will go to. So let's see here. Let's go to our first h2, so do it right above the content_container here. We are going to type in a name="choosing", and then we have to close this as well.
Close the a. We've just created an anchor called choosing. I named it choosing because this section is Choosing and using fonts. Let's scroll down to the next one and we're going to call this one text because we're working with text on the page. Go down to the next one. We'll call this one current because we are keeping current with web type. And finally, last one.
Let's go ahead, we're going to call this one love because it's for the Love of Type. Save that. So now we have some anchor spots on our page. What we need to do now is actually link to them. So let's go up to our list of links here and inside the list item tag is where you're going to start your link syntax. I'm going to call this one a href=, and we want this one to go to that choosing anchor that we created. Because it's going to an anchor, we need to use the hash mark and we need to end our link.
I am going to copy and paste in here. Choosing will become text and end our link. This one will become current and end our link. And finally, this one will be love and we will end our link. Let's go ahead and save this and review it in the browser. Let's refresh here. Excellent! We have four links and if we click on them, they will take us where we want to go.
Okay, great! Now, they don't look the way we want them to yet, but we'll take care of that later in the chapter. But before we move on and do that, I want to show you why we put the links into an unordered link. I've saved a version of this lesson without the CSS. Here the links are in an unordered list. You can see that they belong together, that they are a list of links, they feel like a unit. I've also saved a version without the CSS where I made each link a paragraph instead of within an unordered list.
Here the links sort of the float away from each other. We can see that they're links, but they no longer feel like they belong together. We no longer get a sense that they are a set of links. Also, setting your links as paragraphs isn't semantically correct. The links are not four paragraphs of text; they're four items in a list. So whenever possible, set your navigation links as a list. We've got our navigation links working and in the next lesson we'll style them.
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.