

Whether it’s font-size or line-height, or even paragraph margins, one size does not fit all fonts. Each paragraph on the right now stands on its own more noticeably.ĭespite the open line-height, if Perpetua is used, it’s harder to read at this font-size and should probably be set larger with its line-height adjusted accordingly. As in print layout programs, you can add space between paragraphs using margin-bottom or margin-top in your CSS, used below in the paragraph element.įont-size:1.6em line-height:2.2em margin-bottom:2.2em Ĭompare the difference between the one without extra space (below, left) to the one with the added margin-bottom between paragraphs (below, right). In the revision below, a font-size:1.6em with a line-height:2.2em opens things up, adding more air.Īlthough the two paragraphs are clearly separated in the revised example above, the gap between them isn’t as noticeable as it could be. Because it wasn’t specified in the CSS, the browser uses its default setting and the vertical space between each line of text appears too close. The biggest problem in the example above? The line-height. Default paragraph settings, whether composed using HTML, a content-management system, or a web editor, can make for crammed leading.

The text looks dense and as a result, overwhelming. If the paragraph leading or line spacing-known as line-height in CSS-is too close it makes for a less than welcoming layout. Moreover, once you understand paragraph fundamentals, it makes challenges like initial letters even more rewarding during the design phase. Paragraph layout is important when it comes to engaging readers, giving them an inviting and pleasurable online reading experience.

Leading, margins, and indents factor into building and spacing paragraphs.
#How to do first line indent in word 2017 how to#
While those posts showed you how to add flair to your paragraphs, this one covers the structural foundations. Past posts in Web Typography Essentials looked at customizing initial caps in parts one, two, and three of the series.Īnother post explored setting the first line or lines of your paragraph in uppercase. Putting the Fun in Paragraph Fundamentals As a web designer, do you take paragraphs for granted? Putting in little to no effort designing them? Using whatever built-in paragraph format your content management system provides? Relying on the defaults of your WYSIWYG web editor? Worse yet, doing next to nothing and hoping the browser takes care of it for you? If you answered Yes to any of the above questions, then it’s time to take a closer look at paragraph spacing.
