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.
Now that the text and links are worked out, we'll add a background color or image to the page. This will create an edge to our page, as well as add color and maybe even texture. Looking for a background color, we want something traditional. Subtle. Something that works with the color of the type and the color of the links. Red is a traditional color in typography, but here it's too overwhelming. The dark brown gray makes a nice contrast to the white page, crisp and elegant like a tuxedo, but it might be too dark.
If that felt to dark, we could lighten it up, but this feels too muddy to me. We could bring in a totally different hue. A nice warm, dull yellow feels luxurious. This one has possibilities, though I'd want to tone it down some. The dark brown gray also has possibilities, but I'd also like to try a background image. A subtle elegant texture could make a nice contrast to the text. We haven't been given an image to work with, so we're going to have to come up with a generic image that needs some general guidelines.
We want something traditional looking, maybe traditional ornaments or shapes. We also want a muted, subtle color palette, so it doesn't compete with the text. And a texture that doesn't compete with the text either. There are a lot of sites for free background images. It's important to make sure any image you use is available and legal for use on your web page. I enjoy backgroundlabs.com and squidfingers.com. They have very different kinds of images.
I visited both sites searching for a possible background image and found a lot of patterns. I narrowed the selection down to a few based on our guidelines. This one is too busy when it tiles. This one has potential, but I'm not sure about the color. This one is too graphic. It reminds me of retro linoleum, which is great. It's just not right for this project. This one is way too dark. I love the pattern and the subtlety, but it makes the white page glow.
This one, well, it's sort of cliche, but I like it. It's light enough to not compete with the text. It has very traditional forms. It softens the border around the page and it pulls everything together. There are a lot of good things about this one, but I'm not crazy about the gradation and I think you could have a slightly smaller footprint so it would repeat more often and I might want it a little lighter. I think I use this one as an inspiration and make my own. Here is the one we made in the studio.
It's almost the same color and if possible it's even more cliche, but that's what I like about it. It's sort of fun. Also we no longer have a gradient in the forms and the forms relate more to the Chopin Script. This is the background image we're going to use. Whenever possible, make your own image. That way you'll get exactly what you want and not have to cross your fingers and hope that something out there will work for you. If you want to make your image, but don't know how I recommend Photoshop CS5 for the Web, Chapter 4, from the lynda.com library.
So we've picked an image for the page. I want to take a minute to point out they we are going to put the image in the background, but we're keeping the text on a white background over the image. I purposely will not place the text directly over the image. Type over an image, even a subtle image texture like the one we've chosen, is much harder to read. The background colors constantly change and legibility of some of the words gets compromised. Readers have to work harder to read the text.
A good rule is to only put text over flat solid colors, so the background remains constant to 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.