Page MenuHomePhabricator

dt Topics in dl Description Lists look too small due to serif font
Open, Needs TriagePublicBUG REPORT

Description

List of steps to reproduce:

  • add a description list <code>&lt;dl></code> with topics <code>&lt;dt></code> to a page, in Mediawiki syntax these are lines that start with a semicolon <code>;</code>
  • view the result

What happens?:

  • The topic looks smaller than the description (HTML: <code>&lt;dl></code>, Mediawiki: colon <code>:</code) or normal paragraphs.
  • The topic is set in the same bold serif font as headings at 1.125line height and 0.95em font size.
  • The heading levels have 1.2em, 1.25em, 1.4em, 1.6em, 1.8em and 2em.
  • Description and pargraph text are also at 0.95em, but use a sans-serif font which appears larger to the human eye, not least due to taller x-height.
.mw-body dt {
    font-weight: bold;
    font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
    line-height: 1.125;
    margin: 1.5em 0 0.5em;
    margin-bottom: 0.1em;
}
/* not applied: */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
    font-weight: normal;
    font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
    line-height: 1.125;
    margin: 1.25em 0 0.5em;
}
/* only font size and colors cascaded from here: */
body {
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
    color: #000000;
    background: #72777d;
    font-size: 0.95em;
    line-height: 1.5;
}

What should have happened instead?:

Either use the same sans-serif font and size as in the description and normal paragraphs, but bold-faced, or increase the size of the serif topic to something sensible between 1.0em and 1.2em.

While at it, please add 'Libertinus' at the top of the serif font stack, because that's the name of the actively maintained fork of 'Linux Libertine'.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

image.png (51×237 px, 3 KB)

In dark mode on English Wikipedia.

Event Timeline

Izno updated the task description. (Show Details)
Izno moved this task from Backlog to Change CSS on the CSS board.