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.
Using color takes practice. A common mistake web designers make when using color is choosing two colors that vibrate together. The colors might be complementary to each other. That is, opposite each other on the color wheel, or the colors might simply be too bright. Add a bright color to a black background and it can start to hurt your eyes. Remember, people read what interests them, but if we make text too hard to read, people won't read it, even if they're interested in it.
We're going to pick a color palette for our sans serif bibliography. I already have a background image in mind. We can use it to inspire our color palette. We used a subtle palette for our elegant bibliography. We'll use more color here, but still stay simple. When I think of simple, I often think of primary colors. Red, blue and yellow. We don't have a lot of red in this image, just a bit of reddish orange, but we can use it to pick a red color for the text. We'll start with a red and yellow color combination. Wow! That's bright. There's not a lot of optical vibration, but the colors themselves are not easy to look at for a long time. We need to reduce the brightness.
I've made the yellow a little lighter, duller and well, maybe a little peachier. The red I've made darker, duller, and a tad purplier. Here I'll show you. By making the colors less bright, they're gentler on our eyes. By increasing the contrast between the text and background color, that is, making the text darker and the background lighter, the text is more readable. Now let's look at a blue and yellow color palette. Again, the colors are too bright and their values are too close together.
We need to change that. Here I've used the new yellow background I used for the red and yellow palette and I've chosen a darker blue, but the colors don't feel right yet. The blue is slightly too purple compared to the blue in the image and the yellow feels may be a little too orange here. We need to change it again. I've kept the blue dark but made it a bit grayer and greener. Here I'll show you the color changes. The blue is a better match for the blue in the image. The yellow is still warm.
That is it still a bit peachy, but I lightened it up more. Last but not least, we'll look at a blue and red color palette. This is too bright and the colors are too similar in value and we need to fix both of those things. Here, I just try to using the blue and red we already developed for the first two color palettes. They're less bright, but they're very hard to read because they're both so dark and there is little contrast between them. This is more readable, but it just feels too blue so I'll try again.
I've got the blue so light and dull, it's almost gray here, but the red is a little warmer, so it's not too dull. Here I'll show you the color changes. Even though we had already chosen colors that worked in the other two palettes, they didn't work when used together. So we had to keep looking. We've got three color combinations. The question is, which one should we use? All three color palettes are readable, but I think the red will be a bit much for a whole page of text, so I'm going to go with the blue and yellow combination.
Now let's get these colors into our sans serif bibliography. Start by looking at the HTML file in the browser. We haven't set any color yet. You can see it's just black-and-white. We'll add the colors in our CSS file. For now, we want the whole page to have the background color. So we're going to add it to our body selector. We'll add the property background-color: #fcf8d0.
You notice I used the hash mark. If your color ever doesn't work, make sure you have a hash mark in there before your syntax. We also want all the text to have the text color. So we're going to go into our universal selector here and add the property color: #264c73. We'll save this and we can review it in our browser.
I'll hit refresh and there is our color. It looks great. It uses colors from the image and it uses more color than our elegant version, but it remains simple and it retains legibility. I think we found our starting color palette for this bibliography. As we add color for links and place the image in full size, we may end up having to shift the color slightly, but for now I think we're good.
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.