Do you enhance readability with line breaks and spacing?

Writing in large blocks of text is a common practice, but it can hinder readability. Incorporating line breaks and spacing significantly enhances content readability. This allows readers to navigate through the text more easily, absorb information more effectively, and stay engaged with the material.
<asideEmbed
  variant="info"
  body={<>
    **Warning:** For web (HTML/Markdown), line breaks **should not be used to to create layout spacing**!
You should [use CSS margin and/or padding](/html-css-do-you-know-how-to-create-spaces-in-a-web-page) instead.

Learn more on [HTML &lt;br&gt; Tag: The Dos and Don'ts of Adding an HTML Line Break](https://blog.hubspot.com/website/html-line-break).

See the [more information on line breaks in Markdown](https://www.markdownguide.org/basic-syntax/#line-breaks).

On the other hand, in regards to **emails** and/or **informal documents**, line breaks can be used for spacing. In these cases, correct syntax is not crucial, and breaking a line is more convinient than dealing with margins/line spacing.
  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>

## Long paragraphs

Consider breaking lines/paragraphs when you have a long block of text. You should aim to separate the information by context.

<asideEmbed
  variant="greybox"
  body={<>
    
SSW is made up of a great team of staff that is passionate about technology and how it meets business needs. Today SSW has offices in Sydney, Melbourne, Brisbane, Newcastle, Strasbourg (France) and Hangzhou (China), with over 100 employees. Want to meet them? Have a look at SSW People.

  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - Long block of text',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    SSW is made up of a great team of staff that is passionate about technology and how it meets business needs.

Today SSW has offices in Sydney, Melbourne, Brisbane, Newcastle, Strasbourg (France) and Hangzhou (China), with over 100 employees.

Want to meet them? Have a look at SSW People.
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - The text is separated by paragraphs',
    shouldDisplay: true
  }}
/>

## Callouts

Content elements like **Note**, **Tip**, **PS** (and similar) should be on a new line to enable better readability. It is beneficial to bold those words.

<asideEmbed
  variant="greybox"
  body={<>
    Test the login functionality thoroughly. Note: Try both valid and invalid credentials.
  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - No line break before the note',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    
Test the login functionality thoroughly.\
**Note:** Try both valid and invalid credentials.
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - The "Note" being on a fresh line and in bold makes it much easier to read',
    shouldDisplay: true
  }}
/>

## URLs

Breaking a line is also recommended before URLs.

<asideEmbed
  variant="greybox"
  body={<>
    Check out these employment opportunities at SSW: <https://www.ssw.com.au/employment#available>
  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - No line break before the URL',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    Check out these employment opportunities at SSW:  \
<https://www.ssw.com.au/employment#available>

  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - The URL being on a fresh line makes it much easier to read',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="info"
  body={<>
    **Tips:** URLs can get cluttered quickly - [keeping them short and clean](/create-friendly-short-urls) makes them easier to read, share, and manage. Whenever possible, it's even better to [use descriptive links](/descriptive-links) instead of full URLs.
  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>

## Headings

It's a good idea to have some space after headings.

<asideEmbed
  variant="greybox"
  body={<>
    
Hey Bob,
Check out this awesome new video about the SSW Cultural Exchange Program!
  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - No spacing after heading',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    Hey Bob,

Check out this awesome new video about the SSW Cultural Exchange Program!
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - Spacing after heading',
    shouldDisplay: true
  }}
/>

## Multiple items as lists

If you text has information that can be turned into multiple items, you should do so, by creating a list. For example, when sending PBIs for a Sprint.

<asideEmbed
  variant="greybox"
  body={<>
    I have 2 PBIs in the coming Sprint: Product Backlog Item 88994: Performance | Create a new App Service plan and Product Backlog Item 88823: Azure | Create a new App Service Plan in West US for SL production resource group. I will do the IoC after.
  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - Block of text',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    I have 2 PBIs in the coming Sprint:

* PBI 88994: Performance | Create a new App Service plan
* PBI 88823: Azure | Create a new App Service Plan in West US for SL production resource group

I will do the IoC after.

  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>
<figureEmbed figureEmbed={{
  preset: "goodExample",
  figure: 'Figure: Good example - List is used to separate information and make it easier to digest',
  shouldDisplay: true
} } />


**Note:** On the example above, see how changing from "Product Backlog Item" to "PBI" also helps with readability.
However, you should [only use acronyms when the recipient is familiar with the term](/avoid-acronyms).

## Images and captions

It is also recommended to include spaces after an image or a figure description. These elements need breathing space to help users focus on them.