Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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 we talk about color, we can describe it in terms of hue, value and intensity. Hue is the color of the color. For example, the hue of this color is red. The hue of this color is blue. Value is how dark or light the color is. When talking about the pure color, blue and red are about the same value. The blue might be a little darker. Yellow is lighter in value and there are also darker and lighter versions of each color.
Pink, for example, is basically a very light version of red. Intensity is how bright or dull a color is. There are many version of the color blue and many version of the color red. Some versions are lighter, others are darker. Some feel more intense or bright. Others feel less intense or duller. Hue affects readability when color pairs used for text in the background vibrate.
This tends to happen when complementary colors are used. Complementary colors are the colors opposite each other on the color wheel. The color pairs purple and yellow, red and green, and blue and orange will vibrate more than other color pairs and the brighter the color pairs, the more they'll vibrate. Contrast also affects readability. If a background is too dark and the text to light, it can make the text sparkle. This is true even when working in black and white.
Using a slightly lighter background color can greatly improve readability. On the other hand, if there's not enough contrast between the background color and text color, it's difficult to see the words. The trick is defined a good balance between light and dark. Bright colors also affect readability. When bright colors are used on screen, they create a vibration or a sparkle. If colors are too bright, it can be almost painful to try and read them. If you must use a specifics hue, it's best to use a duller version.
You can try going darker or lighter. I often try using a grayer version of the color or browner version of the color. As you can see, not all the colors work for text, but it's always good to explore your options. You can find a variety of hues, dark, light, bright and dull, at the Hues Hub. Looking only at the color blue, you can see they have green blues, blue greens, blue blues, and blue purples.
The color options are laid out from light to dark and from dull to bright. One of the reasons why like this site is if I know I need a darker or a lighter color or a brighter or a duller color or even a slight shift in hue, for example, from this blue to this blue, I can try the colors in the Hues Hub that are around the color I'm already using. Color makes a difference in the readability of text. It's worth paying attention to.
Even a slight shift in color can change the overall feeling of the page. You can make the page feel warmer or cooler, elegant or playful. You'll notice in all of these examples I was able to shift the feeling of the page by changing the single color. I recommend using color sparingly. Think of color like cologne or perfume. It's hard to pay attention to and enjoy a movie when the person behind you has too much cologne or perfume on, and it's hard to read and enjoy a text when it has too much color.
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.