Page MenuHomePhabricator

Update typesetting for style guide
Closed, ResolvedPublic

Description

Proposed typesetting
https://codepen.io/dezinerd/pen/bvGWBm

Change

  • line-height to 1.5 from 1.6
  • h6 to normal font-weight

Add

  • h2 border & padding and increase font-size slightly
  • more explicit h4, h5 & h6 styles
  • hr styles
  • small styles
  • sub/sup font-size styles

Changes in question:

  • a border-bottom instead of underline => remain underline
  • sup/sub margin-left => agreed to be left out for now

Event Timeline

Nirzar created this task.Apr 4 2018, 5:24 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 4 2018, 5:24 PM
Volker_E added a comment.EditedMay 3 2018, 5:58 PM

A few notes:

  • using border-bottom, as used in the pen on a, doesn't work well, especially on older browsers, when applied to a non inline-block element – which leads to issues on wrapped links
  • body's text color is set to #000, is this intended?
  • Upped heading line-height only minimally to 1.25 in contrast to 1.2. Relatively to body's 1.5
  • h3 is computed font-size of 20.8px – 20 or 21? With h1 32, h2 24, I'd go for 20.
  • small is a computed font-size of 13.328px – 13 or 14? I'd suggest 13px as rounded number as we're getting
  • sup computes to 11.2px – I'd suggest 11 as aspirational value. Note, that in Vector it currently translates to 11.2px.
  • sup and sub are from a browser-history point pretty delicate elements to position. I'd suggest, not to add margin on them to prevent unforeseeable browser quirks. Within Wikiverse compare T51965 or T172501.
Volker_E triaged this task as Normal priority.May 3 2018, 7:17 PM
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)May 3 2018, 9:29 PM
Volker_E closed this task as Resolved.May 4 2018, 6:39 AM
Volker_E updated the task description. (Show Details)
Volker_E moved this task from Needs Review/Feedback to Done on the Wikimedia Design Style Guide board.