Html line space between lines

How to Double-Space Text and Change the Line Spacing on a Web Page (HTML/CSS)

One of my visitors wanted to double-space the lines on his web page, that is, to put an empty line between each line of text. This article answers that question, describing how to increase or decrease the gap between lines, using Cascading Style Sheets (CSS).

How to Increase or Decrease Line Spacing

On a web page, the CSS property that controls the amount of space between each line of text is line-height . You will have to change this property on the block (eg, paragraph) that contains your text.

Let’s say that you have a paragraph coded in HTML as follows.

Some lecturers require that the gap between lines in an academic paper be wider than the default. For example, they may stipulate that your text be double-spaced. Or they may say that the line spacing has to be set to 1.5.

To double-space the above, set the line-height to 2. The gap between each line will then be the font size multiplied by the number you specified, which in this case is 2. Since I gave the paragraph a class of «demopara», I can change the line height for all members of that class using the code below.

The text will appear like this:

Some lecturers require that the gap between lines in an academic paper be wider than the default. For example, they may stipulate that your text be double-spaced. Or they may say that the line spacing has to be set to 1.5.

Note that for the above example text, I also added a border to the paragraph and restricted its width, so that there will be multiple lines even if you are reading this on a wide screen. Otherwise I will have to come up with even more dummy text just so that there are enough lines for the double-spacing effect to be visible.

Those who need the line spacing to be set to 1.5 should use line-height: 1.5 . And if you want the spacing to return to its original value (before you messed with it), use line-height: normal . The default value is not necessarily 1.0 as you may think, since for certain fonts, this results in lines that are too close for comfortable reading. To avoid this, desktop browsers apparently use a default line height of 1.2 or thereabouts.

Incidentally, if you want all the paragraphs on your page to use that same double-spacing (or 1.5 spacing, or whatever), there’s no need to give your paragraphs a class like «demopara» just for this purpose. Set the line-height property directly on the p selector to affect them all, like so:

If you don’t have easy access to your style sheet or the section of your web page to add the CSS rules, and you only need to double-space one paragraph, you can add the line height rule to the paragraph tag itself. That is, change the opening

tag so that it now says

.

Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Copyright © 2017-2018 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 9 October 2018.

Источник

CSS Text Spacing

In this chapter you will learn about the following properties:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example

Line Height

The line-height property is used to specify the space between lines:

Example

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example

White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Line Spacing: The Fine Line Between Good and Bad UX Design

HTML line spacing — the vertical space between two lines of text within a paragraph — isn’t the most exciting thing in the UX design world, but it matters more than you think. This styling element involves Experience Strategy and Interaction Design — two of the four UX design quadrants used to create an incredible user experience. But it goes much deeper than that.

Here’s a quick lowdown on HMTL line spacing:

• It has the power to make a text more or less readable. Line-height has an enormous impact on readability, and if users can’t read content, they’re going to hit the ‘back’ button or exit the app.
• It’s super-important for accessibility, and with ever-increasing legal standards and requirements that govern this practice, you need to use the correct spacing or risk alienating users.
• Good line spacing makes or breaks the success of a website or app. It’s that simple.

In this guide, deep dive into HTML line spacing and discover how to get it right.

How does HTML line spacing make a design more readable?

Line spacing isn’t a font thing. It’s a UX design thing. But when was the last time you heard designers talk about it? Line height matters because it makes text readable or unreadable.

• If line spacing is too large, there’s too much white space. The text looks awkward.
• If line spacing is too small, letters appear all squished together. The text looks awkward.

Most UX designers learn line spacing of 130-150 per cent is best for readability (1.3-1.5), with 140 per cent (1.4) the golden ratio, but that formula won’t benefit all users. Your client might have a style guide with a line spacing requirement that ranges anywhere from 120 per cent to 200 per cent, but someone might have written the style guide decades ago, long before anyone considered web accessibility. Consider changing the status quo if it improves readability. (More on accessibility in the next section.)

Unfortunately, there’s no magic number that designers agree on, so it’s all down to trial and error on CSS. Some calculators claim to work out the perfect line spacing and font size, like this one, but as a designer, you’ll make the final decision. Use a design tool like UXPin, which lets you experiment with line and character spacing before you go live. World-famous UX designers use it for a reason, so why not join us with a free trial?

Why HTML line spacing matters for accessibility

Accessibility is a big deal in UX design right now, and rightly so. A good designer designs products that provide meaningful experiences to all users, including people with disabilities. Over 60 million adults in the United States alone have some kind of disability. That’s around one in four of the population. Still, few UX designers consider their requirements when creating prototypes and products. This needs to change. Now.

The World Wide Web Consortium (W3C), the international community that develops accessibility standards for the web, says:

• Line spacing should be at least a space-and-a-half within paragraphs. So around 150 percent or 1.5 times the font size.
• Spacing following paragraphs should be at least two times the font size.
• Spacing between letters should be at least 0.12 times the font size.
• Spacing between words should be at least 0.16 times the font size.

These are just guidelines, not laws, and the W3C can’t make UX designers do anything, but accessible design principles provide a moral obligation for design teams. Some people with disabilities still can’t engage with websites and apps for years, and the shift towards more accessible design all starts with UX designers like you. So be the change you want to see in the world.

HTML line spacing makes or breaks UX design

HMTL line spacing might not be noticeable to users (unless it’s really bad), but this subtle style element drives the success of your prototypes and completed designs. Discuss this issue with your team at the start of a UX design project and consider the client’s brief, style guide or design system, demographic, and all the other design elements you plan to implement. Nothing’s set in stone: You can always adjust line spacing later on.

Always consider other typography elements. Font size, text length, and character spacing are all linked to line height, and it’s your job to get these components correct. As a general rule:

• Larger fonts look better with less line spacing. Especially headers.
• Smaller text sizes work best with larger line-heights.
• Wider paragraphs work best with more spacing.
• So do longer paragraphs.

A recent eye-tracking experiment saw 104 people read text on Wikipedia, where the researchers changed the line spacing of the text from 0.8 to 1.8 to measure readability and comprehension. The results? Line spacing at the two extremes, 0.8 and 1.8, impaired readability, suggesting text-heavy websites should use more conservative spacing. Adjusting your spacing to somewhere toward the middle of this range proves the most successful. Again, there’s an argument for line spacing of around 1.3-1.5, but it depends on context.

Summary

While there’s no golden ratio for HTML line spacing, consider readability, accessibility, and overall aesthetics when incorporating text into your next prototype. Few UX designers think about this styling element, so you’ll be on the front lines of a design revolution. Discover the perfect line and character spacing on UXPin, the No.1 UI design and prototyping tool that turbocharges typography and streamlines styling. Try it for free.

Found this useful? Share with

Design Systems & DesignOps in the Enterprise

Spot opportunities and challenges for increasing the impact of design systems and DesignOps in enterprises.

DesignOps Pillar: How We Work Together

Get tips on hiring, onboarding, and structuring a design team with insights from DesignOps leaders.

Follow Us

We are on. Like Don`t miss our latest tweets Follow @uxpin . And hot shots on dribble! dribbble.com/uxpin

• Design Trends 2020
• Web Design Trends 2019
• Web Design Trends 2018
• Creating a Design System Quickly With UXPin
• Scaling Design Thinking in the Enterprise
• Product Development for Distributed Teams

• 12 Design Collaboration Tools for Fast and Organized Work
• Product Design Degrees That Will Help You Land A Job
• 10 Product UX Design Tips for Building Top-Notch Solutions
• 22 Creative Design Thinking Exercises to Bring Your Team Closer Together
• The Atlassian Design System – Creating Design Harmony at Scale
• User Error — All About Preventing, Detecting, and Managing Errors

We use cookies to improve performance and enhance your experience. By using our website you agree to our use of cookies in accordance with our cookie policy.

Источник