Html style text line spacing

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.

Читайте также:  Открыть файл html через главное меню

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.

Источник

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

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

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.

Источник

Оцените статью