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.
In this lesson we're going to apply a typographic accent. We're going to fix the name of the designer quoted. The O in his name should have an umlaut. You need the files quote_accent.html and quote_accent.css from the Exercise folder. Open up the HTML file in the browser to see what we're working with/ You'll see the designer's name appears three times, here at the start of the text and again at the bottom.
It spelled incorrectly with the plain O. This makes his name Hoger, but his last name is H?ger and it should be spelled with an umlaut over the O. We need to add this. If you already know how to add typographic accents to letters using your keyboard commands, you might be tempted to do the same for your HTML text. Don't do it. The keyboard commands might show up in your browser, but most browsers do not recognize them and they will make it difficult to validate your HTML.
Instead we're going to use character entities which help the HTML show characters that won't otherwise work. Open up your HTML document in your text editor. We're going to find his name, here's the first instance, and we are going to replace the O with ö. We can take that syntax, we can copy it, and we'll replace the other two as well.
There's one right here. Paste and then down at the bottom, paste. Save this and review it in our browser. His name now has an umlaut. There are lots of characters that use entities, not just typographic accents. To view a chart of them I recommend going to w3schools.com. There are a lot of references for these charts, but I always recommend this one.
Because it does a great job of laying out all the characters you may need. It makes it easy to see the character on the left. Here's the lowercase o umlaut that we just made. And it gives you the option of using the numerical code or the name code. The numerical codes are recommended. They are supported by most browsers. Always take the time to make sure you're using the correct characters. It is respectful to your readers and to your content.
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.