Headings, Paragraphs, Formatting & Whitespace

Headings

Headings are used to organize the content of a page and make it easier to skim and find the information that the reader is looking for. Headings should be used to:

• break up text into logical sections
• denote the importance of a particular section

It is also important to use only one H1 heading per page, as this is usually used to denote the page title. If other headings are used, they should be in descending order (i.e. H2, H3, etc.).

Headings should be in close proximity to the information they showcase. This usually means a CSS stylist must adjust the bottom margin of the heading and the top margin of the element beneath it.

DO NOT USE HEADINGS AS A SUBSTITUTE FOR PARAGRAPHS!

Paragraphs

Effective Paragraphs:

• Break up text into smaller, more readable chunks
• Focus on a single idea or point
• Are no more than a few sentences long
• Are about 45-80 characters long for optimum readability. Utilize line breaks
  (<br>) (😜) to shorten the line-length of a paragraph
• Branch to detailed content with well-named hyperlinks
  for those who want additional information. Off-site links should open
  in another browser tab by using the target="_blank" attribute in the <a> tag
• Utilize 'nonbreaking spaces' ( ) to keep
  important content together, protecting it from
  line breaks as pages resize. Names, linked text,
  book titles, etc should not be 'split' between 2 lines of text
• Can often be replaced with bulleted lists

Formatting

Text formatting can be implemented by specific HTML tag use, or with targetted styling with CSS (preferred), or by HTML formatting with attributes (use sparingly). It is used to:

• emphasize certain words or phrases (especially by using the <span> tag)
• make text easier to read

Formatting Techniques and Principles:

• Bold (<b>) and italic (<i>) formatting
• Font size and color
• Font Families:
  • sans-serif fonts should be used primarily
  • serif fonts should only be used sparingly as accents in a page
  • Monospaced fonts should be used when precise alignment is important, as when using numbers in a table
• HTML's' <abbr> tag
  • Adds clarity to acronyms without adding extra word-clutter to a page
• Underlining (<u>) and Hyperlinks (<a>)
  • Because of its association with hyperlinks, underlining should never be used for emphasis
  • Consider an alternative styling technique for hyperlinks other than underlining
  • Consider using a title attribute for most links to give additional information to the user about what the link will do or where it will take them
  • A pseudo-class on hyperlinks is another way to grab attention to hyperlinks without using traditional underlining
• Alignment & Proximity: Essential design principles
• Less is more

It is important to use formatting sparingly and only when necessary, as overuse of formatting can make the text difficult to read.

At all times, a designer should keep the C.R.A.P.  Rule in mind!

Whitespace

Whitespace is used to create visual breaks in the text and make the page more visually appealing. Proper use of whitespace can help create an organized, easy-to-read page.

Use whitespace strategically, as too much whitespace can make the page seem cluttered, while too little can make it seem crowded.

Padding and margin are under-utilized CSS properties in helping a page breathe.

Never use <br> tags to create whitespace. Use padding and margin!