Page MenuHomePhabricator

font size adjustments
Closed, ResolvedPublic3 Estimated Story Points

Description

In order to improve the readability of radio button descriptions, and still maintain the right size hierarchy between the label and description of radio buttons described by the WMF (the description font should be 2pt smaller than the label), we should:

  • Increase the size of the radio button label from 14 to 16px (1rem). Line-height: 1.5. This way we also align the proportions of the line-height and the size of the radio button (1.5rem, 24px)

Screenshot 2020-01-20 at 12.50.22.png (74×278 px, 11 KB)

  • Increase the size of the description text from 12 to 14px (0.875rem). Line-height: 1.6 (1.6rem). 👈🏻 The value of the line-height applied to the 14px font has been increased following Volker's input. The new value is following Vector.

Screenshot 2020-01-20 at 12.52.01.png (78×280 px, 12 KB)

  • Decrease the property label size from 17.4 to 16px and change the color to #222 (Base10)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sarai-WMDE renamed this task from Increase the size of the radio button label and description text to Increase the font size of the radio button label and description text.Jan 20 2020, 12:08 PM
Sarai-WMDE updated the task description. (Show Details)

Yes, the intention of the ticket makes sense to me.

@Pablo-WMDE @Lucas_Werkmeister_WMDE @Tonina_Zhelyazkova_WMDE :
From a technical point of view, there are some interesting technical challenges here when we try to integrate this change into Bridge.

While thinking about it more, I feel a component in a library should probably use em instead of rem in order to respect the styles of the components that wrap it. So maybe we should change that.
But then, there is a font-size: 0.875em on body > .oo-ui-windowManager that is around the entire data bridge app. So an font-size: 1em; in this radio-button would currently result in a rendered size of 14px instead of the expected 16px.

How do we deal with that? We could add a font-size: calc(1em/0.875); on #data-bridge-app?

(Note on process: I don't think this ticket needs an urgent fix, but rather we can use it to ponder how we would like to to handle font-size and what depends on it in Bridge in general.)

While thinking about it more, I feel a component in a library should probably use em instead of rem in order to respect the styles of the components that wrap it. So maybe we should change that.
But then, there is a font-size: 0.875em on body > .oo-ui-windowManager that is around the entire data bridge app. So an font-size: 1em; in this radio-button would currently result in a rendered size of 14px instead of the expected 16px.

How do we deal with that? We could add a font-size: calc(1em/0.875); on #data-bridge-app?

I just noticed that "font-size: 0.875em on body > .oo-ui-windowManager" is only true on the default Desktop skin, not on Minerva. So maybe our fix should rather be font-size: 1rem; on #data-bridge-app?

Charlie_WMDE renamed this task from Increase the font size of the radio button label and description text to font size adjustments.Jan 27 2020, 4:08 PM
Charlie_WMDE updated the task description. (Show Details)
Lydia_Pintscher moved this task from Incoming to Ready to pick up on the Wikidata-Bridge board.

note: this will probably be migrated to an overall visual improvements ticket

Change 570354 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: PROPOSAL: refactor for saner font size handling

https://gerrit.wikimedia.org/r/570354

Change 570354 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: saner font size handling

https://gerrit.wikimedia.org/r/570354

Line-height still missing (currently 1.57 for some reason), rest correct now.

Change 574749 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[wikibase/vuejs-components@master] Fix line-height of radio input label and description

https://gerrit.wikimedia.org/r/574749

Change 574749 merged by jenkins-bot:
[wikibase/vuejs-components@master] Fix line-height of radio input label and description

https://gerrit.wikimedia.org/r/574749

Change 574775 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Bump Version to 0.1.6

https://gerrit.wikimedia.org/r/574775

Change 574784 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Adjust line-height of 14px text to Vector's 1.6

https://gerrit.wikimedia.org/r/574784

Increase the size of the description text from 12 to 14px (0.875rem). Line-height: 1.6 (1.6rem). 👈🏻 The value of the line-height applied to the 14px font has been increased following Volker's input. The new value is following Vector.

@Sarai-WMDE does this only affect the description or other places as well? In the WMF style guide and in Vector, 1.6 seems to be the general line height, not just for small text such as this description.

Change 574784 merged by jenkins-bot:
[wikibase/vuejs-components@master] Adjust line-height of 14px text to Vector's 1.6

https://gerrit.wikimedia.org/r/574784

Change 574775 merged by jenkins-bot:
[wikibase/vuejs-components@master] Bump Version to 0.1.6

https://gerrit.wikimedia.org/r/574775

Change 574817 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: update to new component library version

https://gerrit.wikimedia.org/r/574817

Change 574817 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: update to new component library version

https://gerrit.wikimedia.org/r/574817

I already looked at this with Charlie while it was in review, but I think the change in requirements (bigger line height) came later, so moving to Verification instead of closing it directly.

just talked with @Lucas_Werkmeister_WMDE because of the line-height of the 14px text --> looks fine for the radio buttons but due to unclear communication on my end, it wasn't changed for the other parts of the modal. moving it back to ToDo for this reason.

Charlie_WMDE claimed this task.
Charlie_WMDE moved this task from To do to Done on the Wikidata-Bridge-Sprint-15 board.

change of plans, after talking to @Sarai-WMDE she mentioned that there's this ticket T246117 for the line height, so this one can be moved to done. sorry for the back and forth.