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.
When we created the different sets of link states in the last lesson, our CSS got pretty long and the multiple A links, V links, etcetera can be hard to keep track of. So in this lesson, we're going to use CSS notation to organize our syntax. You'll need the files biblio_serif_ notation.html and biblio_serif_notation.css from the Exercise folder. You'll also need the Fonts folder with the web font files for Chopin Script.
So put a copy of your Fonts folder into the Exercise folder so Chopin Script will continue to load properly. Open up the HTML file in the browser to see what we're working with. All the links are in place and they look great. We've got the links in the navigation lists that are centered and when we roll over them, they turn italic. We've got the links in the paragraphs of text that link to external sites and when we roll over them, they get a background color.
We've also got the links to the top of the page and when we roll over them, they do not turn italic nor do they end up with a background color. Having three different kinds of links on the page means our CSS for our links has gotten pretty long. Let's take a look. The links start here and we have a lot of link syntax there. There are 10 different pseudo- class selectors for the links. We have two versions each of link and visited, and three versions each of hover and active.
So the link styling has gotten pretty long. Let's put some notes on our CSS to help separate the different versions of the links from each other. I've used them at the top. I'm going to show you how they look here. To start a notation, we use a forward slash, asterisk, and then we close it with an asterisk, forward slash. Then we can put anything we want between those two. Let's go ahead and copy this. Go back down to our links where they start.
Actually, I think our links sort of start here with the unordered list because our links are in the unordered list. So I'm going to go ahead and paste this notation here and I'm going to change this little part to NAVIGATION LINKS. I'm going to put it in all caps so it really stands out. Then let's see. We'll find where our inline links are. I start here, they're INLINE LINKS, and then further down, here we have at the .top, these are links to the top or LINKS TO TOP.
Again, I can put anything I want to between the starting characters and the ending characters. I like to put in hyphens and then put something descriptive in here usually in caps, because it makes a good break. It's almost like a headline or a sub- headline, really breaking up my syntax. It may seem odd that I've dedicated a lesson on CSS notation and of course focused on typography. But great typographers see subtleties and are willing to make small changes as needed.
This means creating a lot of classes, sets of link states, etcetera. CSS notation helps us organize our styling. It makes the job easier when we're reading our CSS. We make less mistakes. We are also less tempted to choose less syntax over better typography. CSS notation can also help us to sort of turn things on and off in our CSS, which helps us try different ways of setting type, and I'll show you how to do that now.
Using the notation syntax will not change how your page looks in the browser, as long as you make sure that you close it and as long as you make sure that you don't use it between two curly brackets. But you can use it between two curly brackets to purposely turn something off. I am going to take us up here to one of our classes, our titles class. We've used this to make the titles of all of our resources italic. But let's try turning that off now.
Forward slash, asterisk, and at the end of it, asterisk, forward slash. You can see that line gets grayed out. If I save this and go to my browser and refresh, my titles are no longer italic. I've turned them off in the CSS. Let's go back and turn them back on. All I have to do is delete those characters. I can save and review it in my browser by refreshing and now my italics are back.
So notations can be used both to organize your styling and to sort of turn things on and off in the CSS. This can help you explore new typographic solutions. Notations in CSS are a good idea. They're professional, helpful, and allow others to work with or learn from your syntax. This is great when you're working in a team or sharing files with others. So CSS notation, as simple as it seems, really helps us create better typography on our web pages.
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.