Page MenuHomePhabricator

Change line height for Medium font size on Minerva
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

In T358501: Review line-heights for typography changes in light of the feedback we got about Minerva for other Minerva sizes and V22 we reviewed the current line heights for Vector and Minerva. The results of the investigation will be implemented in this ticket for the minerva skin.

User story

  • As a reader, I want the ability to read comfortably on the mobile skin, across all typography settings

Requirements

  • The Minerva line heights should be as follows
ParamStandardMediumLarge
Font-size(px)161820
Line-height(em)1.651.61.5

BDD

Feature: Adjust Minerva Line Heights Based on Font Size

  Background: 
    Given the user has selected the Minerva skin on Wikipedia

  Scenario Outline: Apply correct line height for standard font size
    When the font size is set to <Font-size> pixels
    Then the line height should be <Line-height> ems

    Examples: 
      | Font-size | Line-height |
      | 16        | 1.65        |
      | 18        | 1.6         |
      | 20        | 1.5         |

Test Steps

  1. Set Minerva Skin and Access Font Settings:
    • Navigate to Wikipedia and ensure the Minerva skin is active.
    • Go to the appearance settings where font size adjustments can be made.
  1. Verify Line Height for Standard Font Size (16px):
    • Set the font size to 16 pixels.
    • AC1: Confirm the line height is 1.65 ems.
  1. Verify Line Height for Medium Font Size (18px):
    • Adjust the font size to 18 pixels.
    • AC2: Confirm the line height is 1.6 ems.
  1. Verify Line Height for Large Font Size (20px):
    • Change the font size to 20 pixels.
    • AC3: Confirm the line height is 1.5 ems.

Design

  • See above

Acceptance criteria

  • Change the Medium font size line height from 1.5 to 1.6

Communication criteria - does this need an announcement or discussion?

  • TechNews

QA Results - Beta

ACStatusDetails
1T359029#9643934
2T359029#9643934
3T359029#9643934

QA Results - Prod

ACStatusDetails
1T359029#9667492
2T359029#9667492
3T359029#9667492

Event Timeline

ovasileva set the point value for this task to 1.Mar 11 2024, 5:48 PM

Change 1010523 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/extensions/MobileFrontend@master] Change line height for Medium font size on Minerva

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

Change 1010523 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Change line height for Medium font size on Minerva

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

Hello @ovasileva,
Re: Tech News - What wording would you suggest as the content, and When should it be included? Thanks!

Edtadros added subscribers: JScherer-WMF, Edtadros.

Test Result - Beta

Status: ❓Need More Info
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Test Steps

  1. Set Minerva Skin and Access Font Settings:
    • Navigate to Wikipedia and ensure the Minerva skin is active.
    • Go to the appearance settings where font size adjustments can be made.
  1. Verify Line Height for Standard Font Size (16px):
    • Set the font size to 16 pixels.

@JScherer-WMF, All of the line heights appear to be 1.4 (not sure if that is ems). I'm not sure if it makes sense that the line heights would get smaller as the font gets bigger, so I'm curious if the heights in the task requirement are correct. Please take a look and let me know. Let me also know if there is a better way to validate the line height.

  • AC1: Confirm the line height is 1.65 ems.

screenshot 53.png (1×1 px, 335 KB)

  1. Verify Line Height for Medium Font Size (18px):
    • Adjust the font size to 18 pixels.
    • AC2: Confirm the line height is 1.6 ems.

screenshot 54.png (1×1 px, 342 KB)

  1. Verify Line Height for Large Font Size (20px):
    • Change the font size to 20 pixels.
    • AC3: Confirm the line height is 1.5 ems.

screenshot 55.png (1×1 px, 345 KB)

Jdlrobson subscribed.

Per sync this morning, please check the line height on the .content element.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Test Steps

  1. Set Minerva Skin and Access Font Settings:
    • Navigate to Wikipedia and ensure the Minerva skin is active.
    • Go to the appearance settings where font size adjustments can be made.
  1. Verify Line Height for Standard Font Size (16px):
    • Set the font size to 16 pixels.
    • AC1: Confirm the line height is 1.65 ems.

screenshot 56.png (1×1 px, 379 KB)

  1. Verify Line Height for Medium Font Size (18px):
    • Adjust the font size to 18 pixels.
    • AC2: Confirm the line height is 1.6 ems.

screenshot 57.png (1×1 px, 398 KB)

  1. Verify Line Height for Large Font Size (20px):
    • Change the font size to 20 pixels.
    • AC3: Confirm the line height is 1.5 ems.

screenshot 58.png (1×1 px, 406 KB)

Looks good, resolving

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Test Steps

  1. Set Minerva Skin and Access Font Settings:
    • Navigate to Wikipedia and ensure the Minerva skin is active.
    • Go to the appearance settings where font size adjustments can be made.
  1. Verify Line Height for Standard Font Size (16px):
    • Set the font size to 16 pixels.
    • AC1: Confirm the line height is 1.65 ems.

screenshot 120.png (1×1 px, 424 KB)

  1. Verify Line Height for Medium Font Size (18px):
    • Adjust the font size to 18 pixels.
    • AC2: Confirm the line height is 1.6 ems.

screenshot 121.png (1×1 px, 392 KB)

  1. Verify Line Height for Large Font Size (20px):
    • Change the font size to 20 pixels.
    • AC3: Confirm the line height is 1.5 ems.

screenshot 122.png (1×1 px, 392 KB)

Hello @ovasileva, is this improvement ready to be announced in Tech-News?
If it is ready, is this wording okay, "Readers using the Minerva skin on mobile will notice an improvement on the line height across all typography settings." Let me know if it is okay.

Hello @ovasileva, is this improvement ready to be announced in Tech-News?
If it is ready, is this wording okay, "Readers using the Minerva skin on mobile will notice an improvement on the line height across all typography settings." Let me know if it is okay.

Looks good, thanks @UOzurumba!