{"id":226,"date":"2016-11-30T03:47:36","date_gmt":"2016-11-30T03:47:36","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=226"},"modified":"2021-02-14T07:54:56","modified_gmt":"2021-02-14T07:54:56","slug":"how-to-set-perfect-line-lengths-for-your-webpages","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/how-to-set-perfect-line-lengths-for-your-webpages\/","title":{"rendered":"How to Set Perfect Line Lengths for Your\u00a0Webpages"},"content":{"rendered":"<p><iframe loading=\"lazy\" title=\"How to Set Perfect Line Lengths for Your Webpages\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/7INU89MQETE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Previously when we talked about <a href=\"http:\/\/www.simon-li.com\/design-and-code\/virl-your-solid-framework-for-good-typography\/\" target=\"_blank\" rel=\"noopener noreferrer\">what defines good typography<\/a>, we mentioned that line lengths can have a lot of impact on readability. Lines that are either too long or too short will make the text hard to read for your readers. Unlike paper or PDF documents, webpages are resizable. Container widths on webpages are often specified in percentages rather than pixels or millimeters, so it is quite difficult for web designers to use only one percentage value to get proper line lengths across a variety of viewport sizes.<\/p>\n<p>Luckily, by using the right CSS unit and properties, it is still possible to get the line lengths right on your webpages. In this article, I will show you how.<\/p>\n<p><!--more--><\/p>\n<h3>What Are the Proper Line&nbsp;Lengths?<\/h3>\n<p>Before we talk about how to set line lengths on the web, we first need to know what the proper line lengths are. In the episode <a href=\"https:\/\/www.lynda.com\/Page-Layout-tutorials\/Understanding-type-sizes-line-lengths-line-spacing\/372538\/430248-4.html\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding type sizes, line lengths, and line spacing<\/a> of <a href=\"https:\/\/www.lynda.com\/Page-Layout-tutorials\/Before-After-How-Set-Perfect-Text\/372538-2.html\" target=\"_blank\" rel=\"noopener noreferrer\">Before &amp; After: How to Set Perfect Text<\/a>, John McWade, founder and creative director of Before &amp; After magazine, mentioned that the ideal line length is 45\u201355 characters without spaces and punctuations. For small mobile devices, the acceptable line length is 25 characters without spaces and punctuations. (If spaces and punctuations are included, the ideal line length will be around 66 characters according to <a href=\"https:\/\/www.amazon.com\/Elements-Typographic-Style-Version-Anniversary\/dp\/0881792128\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Elements of Typographic Style<\/a> by Robert Bringhurst.)<\/p>\n<p>There is a reason why the web is full of super long lines. Designers normally only specify font size in CSS without setting a limit on the width of the text container. As the browser window stretches, line lengths will grow as well. The solution is to set a width for the text container based on the font size.<\/p>\n<h3>The Unit&nbsp;em<\/h3>\n<p>You may be wondering: I understand that I can set the container width according to font size, but that can lead to a problem. If we need to change the font size later on, we will need to recalculate and change the container width again, and that is not convenient. Fortunately, CSS provides us with a very useful unit: em.<\/p>\n<p>According to <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/CSS\/length\" target=\"_blank\" rel=\"noopener noreferrer\">MDN<\/a>, em in CSS represents the calculated <em>font-size<\/em> of the element. That means, if the text container has a CSS property <em>font-size: 16px;<\/em>, em for this text container will represent 16px, and you can use it when specifying the container width. Let\u2019s say <em>width: 39em;<\/em>. It means that the container width is set to 16\u00d739=624px.<\/p>\n<p>By using em, even if we change the <em>font-size<\/em> property, we can be sure that the line length will stay the same in terms of number of characters, because the width of the text container will change accordingly. Now we only need to convert the line length unit from characters to em.<\/p>\n<p>Assuming that we are using a regular typeface with medium height-to-width ratio, we get the following.<\/p>\n<ul>\n<li><strong>34em\u201336em<\/strong>: for body text in articles, and this is the ideal line length<\/li>\n<li><strong>17em\u201318em<\/strong>: for small mobile devices<\/li>\n<\/ul>\n<p>Note that the viewport width for small mobile devices can be as narrow as 320px. If we set aside 20px for horizontal margins, the width of the text container will be 300px. The ideal font size for these devices therefore is 300px \u00f7 18 \u2248 16px.<\/p>\n<h3>The HTML and&nbsp;CSS<\/h3>\n<p>Now we know the ideal values for the container width, we can proceed to writing our HTML and CSS code. Suppose the HTML markup for the text container is as follows.<\/p>\n<figure id=\"attachment_230\" aria-describedby=\"caption-attachment-230\" style=\"width: 369px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-230\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/html_container.png\" alt=\"The \u201carticle\u201d tag is the container for our text in this example. The text is from A Trip to Venus by John&nbsp;Munro.\" width=\"369\" height=\"222\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/html_container.png 369w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/html_container-300x180.png 300w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><figcaption id=\"caption-attachment-230\" class=\"wp-caption-text\">The \u201carticle\u201d tag is the container for our text in this example. The text is from A Trip to Venus by John&nbsp;Munro.<\/figcaption><\/figure>\n<p>Then we can use the following CSS to control the line length.<\/p>\n<figure id=\"attachment_228\" aria-describedby=\"caption-attachment-228\" style=\"width: 397px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-228\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/css.png\" alt=\"CSS for the \u201carticle\u201d tag\" width=\"397\" height=\"242\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/css.png 397w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/css-300x183.png 300w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><figcaption id=\"caption-attachment-228\" class=\"wp-caption-text\">CSS for the \u201carticle\u201d tag<\/figcaption><\/figure>\n<p>In the above CSS code, we set the width of the \u201carticle\u201d tag to be 36em. You might notice that besides the width property, we also specify the <em>max-width<\/em> property. This is to ensure that the container will shrink accordingly if there is not enough space for the specified width. The value of the margin property in this example will center the text container horizontally. We also add a media query so that the font size will be changed to 16px on small mobile devices.<\/p>\n<h3>Results<\/h3>\n<p>By properly controlling line lengths through CSS, the results we get are a pleasant reading experience for both desktop and mobile users, and you can get your message across to your readers more successfully because of the enhanced readability.<\/p>\n<figure id=\"attachment_231\" aria-describedby=\"caption-attachment-231\" style=\"width: 379px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-231\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/mobile_mockup.jpg\" alt=\"The paragraphs still look quite nice on a small hand-held mobile&nbsp;device.\" width=\"379\" height=\"841\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/mobile_mockup.jpg 379w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/mobile_mockup-135x300.jpg 135w\" sizes=\"auto, (max-width: 379px) 100vw, 379px\" \/><figcaption id=\"caption-attachment-231\" class=\"wp-caption-text\">The paragraphs still look quite nice on a small hand-held mobile&nbsp;device.<\/figcaption><\/figure>\n<figure id=\"attachment_229\" aria-describedby=\"caption-attachment-229\" style=\"width: 981px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-229\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/desktop_mockup.jpg\" alt=\"A proper line length delivers a pleasant reading experience on desktop. No more super long&nbsp;lines.\" width=\"981\" height=\"578\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/desktop_mockup.jpg 981w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/desktop_mockup-300x177.jpg 300w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/11\/desktop_mockup-768x453.jpg 768w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><figcaption id=\"caption-attachment-229\" class=\"wp-caption-text\">A proper line length delivers a pleasant reading experience on desktop. No more super long&nbsp;lines.<\/figcaption><\/figure>\n<h3>Final Thoughts<\/h3>\n<p>Next time you are designing for the web, try using and adapting the above CSS code to set the line lengths of your text. It can greatly improve the reading experience of your webpages.<\/p>\n<p>Did you like this article? If yes, share it with your friends. You can also <a href=\"https:\/\/twitter.com\/simonlidesign\" target=\"_blank\" rel=\"noopener noreferrer\">follow me on Twitter<\/a>.<\/p>\n<h3>Survey<\/h3>\n<p>What are your struggles related to typography? Answer this <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSfR4XcAyyg_9qeQBxNUMoXkf1Bm5eXu6p2XgGCG268NE9AoZw\/viewform\" target=\"_blank\" rel=\"noopener noreferrer\">short survey<\/a> and let me know. It will help me create the best content related to typography for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previously when we talked about what defines good typography, we mentioned that line lengths can have a lot of impact on readability. Lines that are either too long or too short will make the text hard to read for your readers. Unlike paper or PDF documents, webpages are resizable. Container&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94,87],"tags":[15,13],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-videos","category-visual-design","tag-design","tag-typography"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":16,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":780,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/226\/revisions\/780"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}