Page MenuHomePhabricator

Reduce title font size and footprint of topic header
Closed, ResolvedPublic


Reduce topic title from 1.75em to 1.5em.

Make sure that the checkmark lines up with the new title size.

We may make some small adjustments to the margins at the top and bottom of the topic header; we'll eyeball it and see what looks good.

flow-font-15em.png (1×1 px, 170 KB)

Event Timeline

DannyH raised the priority of this task from to High.
DannyH updated the task description. (Show Details)
DannyH moved this task to Product/Design Work on the Collaboration-Team-Triage board.
DannyH added a subscriber: DannyH.
DannyH set Security to None.

Using a big font size can help with scalability (which is useful in long boards especially when search and filtering is not available) but does not work that well with long topic titles. After some considerations, I think it can be worth it to reduce the font size but trying not to go too far. I'd propose going with 1.6em. More details below.

Currently, the topic headers font size is 1.75em (which results in 24.5px). The standard Mediawiki subheader is 1.5em (which results in 21px) but it also has a bottom border which makes the whole element to look higher.

I'd recommend going with something in between the above range.
I won't use lower values since the size may become too close to the content font that may make the size hierarchy less clear, and may require more attention when skimming a long board.

I applied the sizes to illustrate the differences below (feel free to expand the image and move next to compare sizes more clearly):
Current (1.75em):

flow-font-175em.png (1×1 px, 167 KB)

Proposed (1.6em):

flow-font-16em.png (1×1 px, 168 KB)

Smaller (1.5em):

flow-font-15em.png (1×1 px, 170 KB)

Additional considerations
Note that as the size of the title is reduced, the tick mark of resolved topics looks more misaligned. We need to make sure it aligns properly to the same side as the text content.

1.5em still looks very big to me. Can we see what it looks like, going down past the level that's actually too small? It would help to see what that whole range looks like.

DannyH updated the task description. (Show Details)

Change 234171 had a related patch set uploaded (by Catrope):
Reduce font size and vertical padding of topic header

As the outcome of the last discussion about this design change:

  • There was agreement that there is a subjective part in the perception of fonts (e.g., influenced by what users are used to), that the changes were simple enough to be able to give different sizes a try with low development effort, and the difference in pixels between the options (less than 2px in font size) was not extreme. However, it was not considered the option to give a chance to the recommended design.
  • My understanding is that one of the goals of the change the change was trying to achieve is to make a more efficient use of space by allowing users to view more content, reducing their scroll. However I think that, (a) the differences in size we are discussing and the ratio of topic headers per topic content makes the gain in content displayed really minimal (about half a line of text depending on your screen), and (b) the impact in scannability by making headers less prominent cannot be neglected (i.e., banners in a highway have big font sizes so that you can read them while moving fast) which means that users may be able to scroll faster with less chances to miss the content.
  • More broadly, Wikipedia tends to fall in the small side of the font-size spectrum considering sites focused on readability (and guidelines in the area). I agree that deviating radically from the current can result in issues because of the difference with the experience users are used to, but I don't think that the option proposed (1.4px bigger) would suffer from that problem (especially considering we are making it smaller than what it used to be). Taking into account the previous discussions about typography with the designers and our intention to improve readability I cannot recommend a change that does not represent at least a small step forward in improving the readability.

Regarding the patchset, beyond the font-size aspects:

  • The tick mark does not look aligned to the left as the rest of the content. I think having it aligned will help for keeping a clear scan line.
  • The reduction in padding makes a one-line heading not bigger than a one line post. Keeping the basic header unit (grey area) slightly bigger than the basic post area (username content and reply actions) helps to reinforce the visual hierarchy (i.e. the parent-child relationship between header and posts belonging to it). While it makes sense to reduce the padding if the font is reduced, I'd recommend at least to keep some extra pixels to keep the visual hierarchy more clear.

My urgency about this came from the conversations I had at Wikimania. There was a sizeable number of people that I talked to about Flow who independently brought up how much they dislike the size of the topic header. Even people who are huge Flow supporters and love the functionality have gone out of their way to tell me that the header is too big.

There comes a time in every product manager's life when you have to say, you know what? Maybe the header is just too big.

Change 234448 had a related patch set uploaded (by Catrope):
Hackily move the check icon a bit so it appears to align better

The tick mark is actually aligned, DOM-wise; it's just that the SVG itself has blank space all around it, which is making it appear unaligned. The patch above (which I made a separate patch because it also depends on an RTL fix) hacks around this by setting a negative margin that's about the same as the distance between the edge of the check mark and the SVG's box.

There comes a time in every product manager's life when you have to say, you know what? Maybe the header is just too big.

Just to clarify, in case there is any confusion: I have not opposed to the idea of reducing the current size of the Flow headings any single time in the whole discussion in this ticket.

I proposed to start with a 9% reduction, for which I gave a rationale, and I'm open to consider further steps based on more detailed user feedback once the change is in use by our users. You seem to prefer a 14% reduction instead, but I really don't see how the specific amount to reduce is derived from community input or any detail on which especific issues is solving much better than the reduction proposed.

Change 234171 merged by jenkins-bot:
Reduce font size and vertical padding of topic header

Change 234448 merged by jenkins-bot:
Hackily move the check icon a bit so it appears to align better

Betalabs - reduced from 1.75em

div#content h2.flow-topic-title {
    font-size: 1.5em;


Screen Shot 2015-09-04 at 2.59.21 PM.png (252×710 px, 27 KB)


Screen Shot 2015-09-04 at 2.59.30 PM.png (239×709 px, 25 KB)

Awesome, it looks great.