1 #list Dodging Bullets

A mobile-first approach to hanging bullets and ordinals for ordered and unordered lists.

1.1 #list.ordered-list Ordered Lists

Lists with mobile first tabular, hanging numbers.

At small screen sizes, the list items are indented, creating a visual alignment between the numbers and the outer margin. At larger screen sizes, where there is room, the numbers hang, creating the prefered visual alignment between the list item text and the outer margin.

Based on Normalize-OpenType.css, and when the font supports it, tabular numbers are also used to vertically stack the item numbers. The old style variant is also chosen, to keep the x-height in-line with the list item text.

Example
  1. Bell Centennial
  2. Bitstream Charter
  3. Carter Sans
  4. Georgia
  5. Skia
  6. Tahoma
  7. Verdana
  8. Yale
<ol>
  <li>Bell Centennial</li>
  <li>Bitstream Charter</li>
  <li>Carter Sans</li>
  <li>Georgia</li>
  <li>Skia</li>
  <li>Tahoma</li>
  <li>Verdana</li>
  <li>Yale</li>
</ol>

1.2 #list.unordered-list Unordered Lists

Lists with mobile-first, hanging bullets.

At small screen sizes, the list items are indented, creating a visual alignment between the bullets and the outer margin. At larger screen sizes, where there is room, the bullets will hang, creating the prefered visual alignment between the list item text and the outer margin.

Example
  • Skia
  • Carter Sans
  • Georgia
  • Verdana
  • Yale
  • Bitstream Charter
  • Bell Centennial
  • Tahoma
<ul>
  <li>Skia</li>
  <li>Carter Sans</li>
  <li>Georgia</li>
  <li>Verdana</li>
  <li>Yale</li>
  <li>Bitstream Charter</li>
  <li>Bell Centennial</li>
  <li>Tahoma</li>
</ul>