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.
We have picked an image we would like to use for our traditional bibliography. Now we need to add it to our page. You need the files biblio_serif_bgimage.html and biblio_serif_bgimage.css from the Exercise folder. You also need the font's folder with the web font files for Chopin Script. So put a copy of your font's folder into your Exercise folder. That way Chopin Script will continue to load properly. You can see I have provided a folder called Images.
It has our image in it. Open up the Images folder and you can see the image inside is called traditional_bg.jpg. You can name the image anything you want to. I tend to use a bg in my background images' names, because it helps me to know immediately what the image is for. It also helps me to search for images in my files. I also like to include a simple description in the title so my bg images don't overwrite each other. If you choose to download an image, you'll find most sites offering background images use their own naming conventions.
The names can get pretty abstract and it makes it hard to keep images organized. I recommend renaming images so they make sense with your project. Let's open the HTML file in the browser and see what we are working with. The page is set up and we are just missing the background image. So let's put it in our page. And we will do that in the CSS. We are going to add the image to the entire background of the page, so we are going to put it in the body tag. Here we are going to replace the background-color with background-image and we are going to tell the browser where to find that image.
I am typing in here the name. Let's see. So this line, background-image, tells the browser I am putting an image in the background of this site or of this page. The URL says follow this path to find the image I want you to use. Here images/ means it's in my images folder, and then traditional_bg.jpg is the name of the image I want the browser to use.
And then I can close the parenthesis and close the semicolon there and we're set. Now by default this image is going to tile across and down the whole background of the web page and that's exactly what we want. Let's save this and view it in our browser, hit Refresh, and excellent, there is our background image. The only problem is there isn't much space here between the type and the background image, and we are going to have to fix that. We need to get some breathing room into this layout.
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.