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 using a too dark background with a too light text. The contrast of value, that is light to dark, is just too great and the text sparkles on the page and it's hard to focus on. Remember, people read what interests them, but if we make the text too hard to read, people won't read it, even if they're interested in it. Let's look at changing the contrast to reduce the sparkle.
We can start by lightening up the background, but now it's too light and the text is getting lost in the background and it's hard to read. We can darken the background a little and that works better. If you want to continue working in black- and-white, this is a fine solution, but you might not want to work in black-and-white. You can replace the dark gray background with a gray brown color. A subtle shift in hue can make a big difference in how a web page feels. Let's add a color to the serif version of our bibliography.
We haven't set any color yet. You can see it's just black and white. Let's add a darkish grayish color to the background of our page. I like the dark brown gray I just showed you. I think it felt elegant and warm, so we'll add that color and we make the changes to color in our CSS file. For now, we want the whole page to have this background color. So we'll put it in the body selector. Type in body and your curly brackets and we'll type in background-color and the color we're going to use is #5c493d.
Notice I use the hash mark. This is required. If your color ever doesn't work, make sure you've included the hash mark in front of the code. The example I showed you also has white text, so we're going to add that in our universal selector so all of the text will be white. Color and six Fs for white. Since you're already familiar with HTML, you may know I could have used shorthand and typed in the white with a three character syntax and used only three fs, but when I'm teaching new concepts to my students at school, I try to avoid shorthand, because I'll have some students at lower levels and some students in more advanced levels and they don't all have the same comfort with HTML in the same class.
So I'm doing the same here and I'm trying to avoid shorthand, but if you already use it, feel free to do so. Let's save this and review it in our browser. I liked the background color in the earlier example, but I'm concerned it might not work here for the background color in this context. This happens. You won't usually get the exact effect you are looking for with your first try. I think the problem is we're trying to create an elegant feeling to the page and that's harder to do with a dark background. Dark type on a light background feels more elegant.
So we're going to flip the colors around and use the color that we're using for the background in the text and have a white background. Back in the CSS, let's copy and paste what was the background color into our text color and then we can cut the white and put that into our background color. Let's save that and check it out in our browser. That's looking better.
In fact, it's pretty darn good, but we could try a little darker just to see if it would be even better. I usually think of elegant type as crisp, sort of like the crispness of a tuxedo, and using a slightly darker color could help increase the feeling of elegance. So what we're going to do is look for a slightly darker color on Hues Hub. First we're to go back into our CSS and find the number for the color we were currently using. There it is, the 5c493d. We can copy it.
In Hues Hub we're going to search for our current color within the colors that they offer, so we need to start by going to the page we think it's on. Looking at the options, I know it won't be on the green or blue page and the purply red page just feels too cool to me. Our color is sort of a warm brownish color and so it feels closer to orange than any of the other pages, so that's the page we're going to try to find our color on. We can search for the color we're currently using by bringing up the Find bar, pasting our current color in, and we found it. There is, 5C493D.
We want a slightly darker color. I think I'm going to go ahead and try the one that's just below it, 3D3129. I can select and copy this and back in my CSS, I can paste the new syntax. I'll save this and view it again in the browser. That's nice. It's very subtle, but it makes the page feel warmer than if we just used black.
I think we found our color for the text in this bibliography. As we add color for links and maybe a background image or color, we may end up having to shift this 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.