Prose Page Formatting

Written
  • A common problem is too wide line length on content which hurts readability. 35-75 characters is a good target for this.
    • Can do this by increasing margin or font size.
  • Bigger line height helps too.
    • 1.4 to 1.7em helps for content, but should reduce as font size increases
  • Sometimes headlines should use smaller sizes on mobile to reduce excessive wrapping.
  • Dark gray is good for paragraphs, which leaves black for the headers so they stand out.
  • Line spacing should be set so that elements are attached to the relevant items. For example, a date and location would be closer to the headline it's attached to than to the rest of the content.
  • Lists
    • Lists benefit from greater line height and custom bullets.
    • Use custom bullet images and alight them with the left side of the header text for the list.
  • A nice trick is to make the background a gradient, which starts out white at the top for better contrast with the header and slow fade to gray for smoother contrast with inputs later down the page.

Thanks for reading! If you have any questions or comments, please send me a note on Twitter. And if you enjoyed this, I also have a newsletter where I send out interesting things I read and the occasional nature photo.

You can check out a recent issue, or enter your email below to subscribe.