Paragraphs

Paragraphs are the building blocks of most web pages. They are used to break up text into smaller, more digestible chunks. Paragraphs can be used to introduce new sections, provide additional information, or simply to add some breathing room to the page.

General Guidelines

While, there are no hard and fast rules for paragraphs, some commonly used guidelines are based on width and spacing. The sweet spot for paragraph width is between 600px and 800px for large screens, which is commonly seen in the most popular blogs, articles, content pieces, etc. For smaller screens like mobile, width doesn’t matter as much, but margins and padding should be used to create white space and make the text more readable.

Pro Tip: Don’t justify paragraphs when it is part of body content like blogposts, articles, documentation or other similar content. Justified text may look great, but it can be very difficult to read.

Contrast and Spacing

The contrast between the text and the background is important for readability. Using pure black/white text on pure white/black text maybe tempting, but people with dyslexia can find it very difficult to read. It can also cause eye strain for readers.

Here a comparison of using pure white/black background with pure black/white text and using an off white/black background with off black/white text based on light/dark mode.

Here are some pre-styled parapgraphs to get you started.

<p
  class="mx-4 my-8 max-w-2xl text-start text-base leading-7 text-zinc-800 md:mx-6 md:text-lg md:leading-8 dark:text-gray-300"
>
  While, there are no hard and fast rules for paragraphs, some commonly used
  guidelines are based on width and spacing. The sweet spot for paragraph width
  is between 600px and 800px for large screens, which is commonly seen in most
  popular blogs, articles, content pieces, etc. For smaller screens like mobile,
  width does not matter as much, but margins and padding should be used to
  create white space and make the text more readable.
</p>

<p
  class="mx-4 my-8 max-w-2xl text-start text-base leading-7 text-zinc-800 md:mx-6 md:text-lg md:leading-8 dark:text-gray-300"
>
  While, there are no hard and fast rules for paragraphs, some commonly used
  guidelines are based on width and spacing. The sweet spot for paragraph width
  is between 600px and 800px for large screens, which is commonly seen in most
  popular blogs, articles, content pieces, etc. For smaller screens like mobile,
  width does not matter as much, but margins and padding should be used to
  create white space and make the text more readable.
</p>

<p
  class="mx-4 my-8 max-w-2xl text-start text-base leading-7 text-zinc-800 md:mx-6 md:text-lg md:leading-8 dark:text-gray-300"
>
  While, there are no hard and fast rules for paragraphs, some commonly used
  guidelines are based on width and spacing.<strong> The sweet spot</strong> for
  paragraph width is between 600px and 800px for large screens, which is commonly
  seen in most popular blogs, articles, content pieces, etc. For smaller screens
  like mobile, width does not matter as much, but margins and padding should be used
  to
  <a
    href="#"
    class="text-blue-700 underline underline-offset-4 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500"
    >create white space and make the text more readable.</a
  >
</p>

<p
  class="mx-4 my-8 max-w-2xl text-start text-base leading-7 text-zinc-800 md:mx-6 md:text-lg md:leading-8 dark:text-gray-300"
>
  While, there are no hard and fast rules for paragraphs, some commonly used
  guidelines are based on width and spacing.<strong> The sweet spot</strong> for
  paragraph width is between 600px and 800px for large screens, which is commonly
  seen in most popular blogs, articles, content pieces, etc. For smaller screens
  like mobile, width does not matter as much, but margins and padding should be used
  to
  <a
    href="#"
    class="text-blue-700 underline underline-offset-4 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500"
    >create white space and make the text more readable.</a
  >
</p>

While you can use font-bold class or <strong> tags to make the text bold, but if you want to emphasize the text to screen readers you should use the <strong> tag .