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 applying a single property value like Georgia for our font family to most of the web page or web site a quick and easy way to set the attribute is to use the universal selector. The universal selector tells the browser use this value for this property unless I tell you otherwise. We haven't set a font family to the heading or the text yet. So it's coming in as the default font. My default font is Times New Roman. Yours might be different. I can tell mine is not Georgia because of the numbers. They are not old-style.
They are aligning. I can also tell by that lowercase A and E they are not as open as George's and the serifs are little more delicate. We want to set the font family as Georgia, so we do that in a CSS file. As of right now I think we want all the text to be Georgia. We can set the font family to Georgia across the whole page by using universal selector. At the top of the file type in an asterisk. The asterisk means universal selector or everything. You will need your curly brackets as well.
And you will need to set your font family as Georgia. It's a good idea to set a font stack, so we will follow Georgia with a comma and the word serif. That way if the Georgia doesn't work whatever the default serif font is will load in. You will notice that we do not have a font family set for h1. We don't even have a p tag. Let's save our changes and review the page in a browser. It's now using Georgia. Look at the lowercase A and E and the numbers, the serifs.
The text overall looks a little bigger and easier to read. We could still apply unique attributes to each tag. For example if we want h1 tag to be bigger and italic and set in bold, we could go ahead and do that. I am going to the CSS file again and under the h1 we can add font-size:24 pixels, font-weight: normal and font- style: italic. We will save the document and review it in the browser.
The h1 is now big and italic, but it keeps the font family assigned in the universal selector. Using the universal selector and h1 element we created cascading styles. That is styles applied at the universal selector effect all the text. Specific styles for the h1 element were then added on. This is why we call this approach to styling HTML cascading style sheets. It's important to note that styles at the element level take priority.
If we were to change the font family in the h1 element it would override the font family we set in the universal selector. For right now though, let's keep everything Georgia. In the next lesson we will italicize the title in the text.
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.