List (bulleted, numbered, plain) spacing

[Scotchester]

We need to set a standard or two for list spacing. I feel like I see much inconsistency in how we set the spacing between list items, whether they are bulleted, numbered, or unstyled lists. Does anyone else feel this way?

I'd like to propose:

• For regular bulleted/numbered lists appearing in a section of body copy: 15px margin (baseline-to-cap-height)
• For unstyled lists (most often used for a set of links under a little blurb): 30px margin (baseline-to-cap-height)

Maybe it's more consistent than I perceive, but I'd like to make an affirmative decision and codify it in the DM.

[Scotchester]

Semi-related: We should establish standard styles for definition lists. (The dl, dt, and dd elements.)

[Scotchester]

Oh, directly related: We also need to address how far bullets and numbers should be indented.

[amycesal]

I think 30 can be too much when there aren't paragraphs of text, but single lines of unstyled lists. With so much spacing the list no longer feels like part of the same chunk of text:

Same text but at 15px:

I'd advocate for it being 15px across the board unless there's a good example of where 30px is effective.

[marteki]

I like the look of 15px across the board in the example given, but it might create issues on touch devices in lists with heavy linkage. Would there be enough space to confidently engage with a finger or thumb on a small screen?

[KimberlyMunoz]

We usually set different rules for mobile and touch devices on beta. Our links tend to have more spacing on mobile for exactly that reason.

[Scotchester]

That kind of thing doesn't work for the example Amy showed above, though, where there are two links together on the same line.

[KimberlyMunoz]

That's the kind of thing we've been trying to go in and break into two lines for touch devices when we see it.

[Scotchester]

What kind of techniques have you used to do that?

[KimberlyMunoz]

So we're revamping and simplifying our patterns across v1. @duelj pointed out that in cases like this, we might need to just break them out into two lines so that they're clearer.

[Scotchester]

Ahah. Unfortunately, I don't think that's practical in the example given by @amycesal. The list would be massively tall. Maybe it demands a different kind of approach.

[nataliafitzgerald]

@Scotchester - I'm following this issue but not sure what to weigh in on at this point. Do you have an update?

[Scotchester]

Sure thing, @nataliafitzgerald. To recap, here are the things we need to decide most immediately:

• Spacing between items in regular bulleted/numbered lists appearing in a section of body copy
  • Current proposal: 15px (baseline-to-cap-height)
• Spacing between items in unstyled lists (most often used for a set of links under a little blurb)
  • Current proposal: 15px (baseline-to-cap-height)
• Indentation from the left edge for bulleted and numbered lists
  • First proposal for bulleted lists: 15px from edge to center of bullet, 15px from bullet to text
  • First proposal for numbered lists: Numbers right-aligned at 30px from left edge. 15px from number to text.
• Spacing above/below a bulleted/numbered list appearing in a section of body copy
  • First proposal: Same as the spacing between paragraphs, whatever that is.

We probably don't need this as urgently, but we also need to decide:

• Standard styling for definition lists
  • Example of default browser styling: http://codepen.io/anon/pen/NGbEKX
  • One common approach is to bold the titles, add vertical spacing between items, and reduce or eliminate the fairly-large default indentation.

[nataliafitzgerald]

@Scotchester - This is looking good. Is there a good place where I can see these proposed standards coded out. Perhaps one of the recent pages that Design Ops has worked on?

[Scotchester]

@nataliafitzgerald I'll put something together soon.

[schaferjh]

@ajbush is also working on some bulleted list specs for v1 templates this sprint. From what I know this looks similar to what we've got going on, but just pinging him here in case there's anything he's encountered that should be incorporated.

[Scotchester]

Ah, thanks @schaferjh!

[Scotchester]

Remembered something else we need to define: margin above and below a list. Added to the recap post above.

[ajbush]

Thanks @schaferjh for adding me. I am working on the bulleted lists aspect of this issue for V1. For the most part things are pretty similar. Wanted to share some mockups I had put together. Let me know what you all think.

---

Bulleted lists beneath headers (no paragraph introductory text before list

I had wondered if we could have a slight tweak to not include any indentation before the bullets when bulleted lists are the only content beneath a header.

\ Edit: Scott mentioned this would require a class for each occurrence, which may not be V1 friendly

Here's a mockup of this with...

• 30px spacing between items
• 15px spacing between items to compare
• Text 15 px from the left edge (something we were doing in .ai doc that was slightly different. It actually means theres 9px spacing after the 6x6 px bullet. It seemed like the text is a little far away from the bullet when there's 15 px spacing after the bullet.)
  
  

Specs	No specs

---

Bulleted lists within paragraph text

The difference here would be that there would be a 15 px indent before the bullets.

Here's a mockup of this with...

• 30px spacing between items
• 15px spacing between items to compare
• Text 30 px from the left edge (something we were doing in .ai doc that was slightly different. It actually means theres 9px spacing after the 6x6 px bullet. It seemed like the text is a little far away from the bullet when there's 15 px spacing after the bullet.)
  
  

Specs	No specs

---

I would vote to...

• use 30px between items
• not indent bulleted lists when they appear immediately beneath headers if possible. (I do think the 15 px indent is nice beneath paragraph text though)
• keep the space after bullets a little closer to the text.

Let me know what you all think.

[Scotchester]

Thanks, @ajbush!

There's not going to be a very reliable way on the front-end to change the indentation styling of lists that are the only content following a header. We can apply it with a class, but lists that are created by content editors would not likely be able to apply that.

The other concern I have with it (one easily fixed) is that, as shown in your example, the left alignment of the first letter in a heading is somewhat mushy. In the example you provided, looking at it without the gridlines, the bullets appear to be outside the left edge of the heading above, because when seeing it without the gridlines, your only point of reference is the vertical bar of the L. If we want to go the route of creating a special class for this use case, I suggest nudging the bullets in by probably 2px.

One other minor comment: The square bullet character for 16px type is 5x5, and we can't easily make it 6x6. It doesn't make a huge difference, obviously, but just so you know.

[ajbush]

Ok cool that's good to know @Scotchester thanks for your quick response.

Sounds like it's probably not a good idea to add the class then. It would create inconsistencies between pages with the class and pages created by content editors that wouldn't have it.

[nataliafitzgerald]

Let's stick to black for the bullets (as shown on the Design Manual - see image below). The green is more decorative than functional and makes it harder to follow along with your eye from bullet to bullet, particularly when lists get longer. We can find other ways to work in the green.

[ajbush]

I think the green bullets were a really nice touch especially since it was a way to sneak in some brand green and they really livened up the black text a little. I also wonder if a darker/accessible green from the new palette could work?...but I really don't want to hold up progress on this.

Here's an update to the mockups I posted above showing black bullets and removing the option with styling specific to bullets under headers. Also corrected the bullet size to 5 x 5.

Specs	No specs

[benguhin]

Reminder of @Scotchester's summary of what needs to be decided:

• [ ] Spacing between items in regular bulleted/numbered lists appearing in a section of body copy
• [ ] Spacing between items in unstyled lists (most often used for a set of links under a little blurb)
• [ ] Indentation from the left edge for bulleted and numbered lists
• [ ] Spacing above/below a bulleted/numbered list appearing in a section of body copy
• [ ] Standard styling for definition lists (e.g. glossaries)

@mebates @ajbush

[nataliafitzgerald]

@ajbush - I would like to work this into some other DM-Typography updates that I would like to make. Can you send me your ai file so that I can pull it in the master layout I am building? That will also give me an opportunity to review your options.

[Scotchester]

Preview is available at http://cfpb.github.io/cf-type-testing/dist/

It uses 30px above and below the list, and 15px between each list item.

I feel that 30px above the list detaches it too much from the preceding paragraph, which typically introduces the list. I'd propose going to 15px above the list.

[Scotchester]

The preview page has been updated this morning.

After looking at it in more detail and exploring options yesterday, @nataliafitzgerald and I have an updated proposal. The main problem we found with @ajbush ##'s current proposal is:

• Given the decision to no longer base our spacing on baseline-to-cap-height, and
• Given that the spacing between paragraphs is now proposed to be 15px,
• 30px above the list separates the list too much from the preceding paragraph, which is often directly introducing (or is at least related to) the list.

To solve this, we first tried reducing the space before the list to 15px. This looked pretty good, but then that separation was equal to the proposed 15px margin between list items, so it felt like the items were separating from each other too much. Also, again given the decision to no longer base our spacing on baseline-to-cap-height, 15px between items just felt like too much, anyway. It renders out to 25px from baseline to cap height.

Additionally, given the fact that bulleted/numbered lists are almost always preceded by paragraphs or headings that introduce them, we decided to try reducing the space above the list to only 10px.

All that said, here's our latest proposal:

• 10px above bulleted/numbered lists
  • Assumes they are almost always preceded by paragraphs or headings that introduce them. If you have other examples, please share!
• 8px between list items
• 15px below bulleted/numbered lists

Before/after screenshot

Feedback wanted

Please let us know if you foresee any problems with this proposal. I'm happy to add new examples to the demo page too!

Attn: @nataliafitzgerald @ajbush @duelj @jimmynotjim

[nataliafitzgerald]

Here's how the proposed spacing looks with Avenir Next paragraph text:

[ajbush]

LGTM! (I just learned what that meant and wanted to use it) haha.

[nataliafitzgerald]

Apparently I just learned what it meant too. :)

[stephanieosan]

Sorry if this is a dumb question, but how will the spacing above a list work if it's preceded by a header? Will it include whatever amount of bottom spacing the header has + the 10 pixels above bulleted/numbered lists? Or will it just be the header spacing, or just be 10px?

[Scotchester]

Not a dumb question at all; I didn't address that in my post.

I'm actually not certain that @nataliafitzgerald and I thought about that out loud. My gut reaction would be that it should use the header's designated bottom margin only.

[nataliafitzgerald]

Good question @stephanieosan @Scotchester - Can we add that to our coded out sample to make sure it works?

[nataliafitzgerald]

@stephanieosan - To confirm, when a bullet or a numbered list is preceded by a header, the space above the bullet list will be determined by the spacing that is set below the specific header.

Here's a visual of a bullet list after a paragraph and a bullet list after a header:

The code sample has been updated: http://cfpb.github.io/cf-type-testing/dist/

[designlanguage]

Is there a reason we're indenting bullets? I'm not sure about web conventions, but in my experience, bullets often align with the text preceding it. They always relate to the text above them, so they should align to the same place. This also helps hierarchy/clarity when there are multiple levels of indentation.

To think about it another way, the text after a bullet is already indented. The bullet itself is a vehicle for indenting text that belongs to the larger idea preceding it. It shouldn't need indenting itself.

Another reason to not indent bullets is that our print style doesn't do it. Here's one vote for consistency.

@ajbush - I agree with you that bullets following a heading should be aligned, but I don't think that needs to be the exception.

(same applies to numbered lists)

[Scotchester]

@designlanguage I've heard people say you should hang bullets fully out in the margin, but I honestly don't think I've ever seen someone advocate for left-aligning bullets with the text above.

Bullets being indented is a default in I think every word processor I've ever encountered, in all default Web browser styles, and on probably 99% of the websites I've ever encountered.

I do see that in InDesign if you just turn on bullets and adjust nothing else, they're aligned left. But the text it also spaced way far to the right, so I don't think they intended for anyone to just turn on bullets and let it fly without adjusting the spacing parameters.

The other question is, let's say you do align bullets to the left. What do you do with numbered lists? InDesign's defaults seem to do a good job carefully tweaking first 9 numbers on a proportional typeface so that they look very well aligned with the left margin and with each other, but if you have to go to 10 or more, eep.

I would personally be in favor of not left-aligning them in print, too, and am surprised that that's the case in our print styles. I had not noticed that.

[designlanguage]

@Scotchester - Aligning with the text above has been my experience, but I don't have any documentation advocating for it. Above all, whatever we choose to do, I think it should be consistent between web and print. Currently, this is what our print style for bullets looks like:

And here's when we get into double digits:

[Scotchester]

Why are second-level bullets indented?

[designlanguage]

Because it's inconsistent in our print styles.

[designlanguage]

Let me add that I think we should be consistent between print and print as well.

[nataliafitzgerald]

I agree that we should be consistent between print and web (but we should determine what that consistent approach should be). I have found contradictory standards as to whether bullets should fully hang outside of the margin (I don't think any of us want this), left aligning bullets, or slightly indenting the bullets. I did a little bit of poking around and here's what I found (I'm still researching):

Here's the standard from UK.gov. They do not indent. https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style

Here's the "Lists" page from Google. They appear to have a slight indent. It doesn't seem to talk about bullet or numbered lists but there are visual examples within the content for the page.

Comparing the two above, the Google one is styled in a more appealing way but there are certainly multiple variables (not just the indent).

[caheberer]

I'll add that I'm with @designlanguage here, I've always aligned bullets to the left margin of the content above it. I, similarly, don't have documentation, just the voices of art directors past.

@Scotchester brings up a good point about numbers, but with all instances of numbers, aligning to the decimal or comma are better conventions than aligning left or right.

[mebates]

+1 to left aligning bullets

[nataliafitzgerald]

I agree that consistency between print and web is the right approach.

On the surface, left aligning the bullets sounds fine to me, unless there are front end or other considerations that we need to discuss further. @Scotchester - I am definitely interested in talking through your thoughts.

Our report template has bullets indented so I am wondering how consistent we are on the print side of things. We may need to do a bit of an audit/update to get all our ducks in a row.

[Scotchester]

The extent of my thoughts is just that people are used to indented bullets by default. It's the default style in browsers, it's the default in Microsoft Word and Google Docs, that's what people know.

From a front-end code perspective, it doesn't really matter to me.

[nataliafitzgerald]

From a purely design perspective, I support left aligning bullets, particularly because of how narrow our width gets at mobile. Speaking to @caheberer's comment about numbered lists, can we align to the decimal or comma in code?

[nataliafitzgerald]

In the interest of closing out on this issue, I reached out to the Graphic Designers for consensus on the remaining question of whether or not we should indent lists. A majority of the Graphic Designers (100% of those that chimed in) are in support of left aligning lists.

Supporters include @nataliafitzgerald @stephanieosan @designlanguage @caheberer @huetingj

@Scotchester are there any remaining questions that need ironing out?

[Scotchester]

There are still two open questions:

1. Alignment of nested bulleted lists
   • Align the second-level bullets with the left edge of the first-level bullet's text?
2. How to handle numbered lists. Yes, we can align to the period, if the numbers get right-aligned.

[nataliafitzgerald]

Ah yes. So for double digit numbers we run into the issue that if the ordered list is not indented then the double digit numbers will hang over to the left.

Order list (No indent)

Order list (indent)

I prefer the "no indent" approach for the sake of consistency. My thought is that double digit ordered lists will occur infrequently so we should create a pattern that works best for most of the scenarios.

[nataliafitzgerald]

With regard to the alignment of nested bulleted lists, yes we would align the second-level bullets with the left edge of the first-level bullet's text.

Like this:

@Scotchester Would it be possible to see what this looks like in code?

• Align the second-level bullets with the left edge of the first-level bullet's text.
• Left align primary unordered lists and numbered lists.

[Scotchester]

@nataliafitzgerald Yeah, I'll try to get that up today.