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 are going to hang a quotation mark outside a block of text. This method can be used to hang any initial punctuation mark. You need the files quote_hang.html and quote_hang.css from the Exercise folder. Open the HTML file in the browser to see what we're working with. You will see I have already set the quotation marks and the em dash correctly. I've also aligned the heading, the quote, and the footer, and this is creating a strong vertical line.
Dealing a place where this vertical line is weak is right here where the quotation mark is. It's creating a white space, pushing some of the text over. This would be a much stronger line if the D were aligned with the text and the quotation mark hung outside the block of the text, and that's what we're going to accomplish. Hanging a line of text is a two-part process. First, we are going to add margin to the left of the text, moving it over, and then we are going to use a text indent with a negative amount equal to the margin we just added and that will the quotation mark back out.
Let's do it together. In the CSS, find the h2 element. Here we are. Our quote is set as our h2. We are going to add the line margin-left, and we are going to move it over 17 pixels. Let's save and review this in the browser so you can see the change that we just made. We have moved our text over 17 pixels.
Back in the CSS, we can put in a text-indent of -17 pixels. We can save that and review it in our browser and now you can see that the D has moved over and it's aligned with the text and the quotation mark hangs outside that line. But we have a problem. The quote here is no longer aligned with our header. So what we are going to have to do is we are going to have to move this whole block of text over and I will show you how to do that.
Under the h2, you can see that we have a 60-pixel padding left here in our text, but we have just moved everything over 17 pixels. So what we need to do is reduce our padding-left by 17 pixels. Now I'll move everything back over again. So 60-17 is 43. Save and review. Excellent! Now it's all lined up. Great. You can use the text indent anytime you need to hang the first line of text.
Using it to hang punctuation is a great way to emphasize a strong vertical line.
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.