Problem/Motivation

Every heading in the theme renders at font-weight: 700. The VBE Stylesheet design system specifies 600 (SemiBold).

Source of truth, from the VBE Stylesheet (Foundation > Typography), where the shared weight token is weight/primary/heavy: 600 and every heading style references it:

token family size weight line-height
Desktop/Heading/H1 Sora 60 600 1.2
Desktop/Heading/H2 Sora 48 600 1.2
Desktop/Heading/H3 Sora 32 600 1.4
Desktop/Heading/H4 Sora 24 600 1.35
Desktop/Heading/H5 Sora 18 600 1.4
Desktop/Heading/H6 Sora 16 600 1.35

The theme sets it in one line:

scss/_bootstrap-variables.scss:58:  $headings-font-weight: 700;

Confirmed in the browser on a live install: an h4 carrying .h5 computes to font-size: 18px; line-height: 25.2px; font-weight: 700 - size and line-height match Desktop/Heading/H5 exactly, only the weight is off by one step.

The same applies to body bold: the design's Desktop/Body/Bold/Medium is also 600, while Bootstrap's <strong> renders 700.

Steps to reproduce

  1. Install drupal/cms with the Educare site template.
  2. Inspect any heading on the front end.
  3. Computed font-weight is 700; the design specifies 600.

Proposed resolution

Set $headings-font-weight: 600 in scss/_bootstrap-variables.scss and rebuild the theme CSS. The Sora SemiBold face must be loaded for 600 to render as intended rather than being synthesised - confirm the font stack ships that weight before merging.

Remaining tasks

  • ✅ Confirm the design value and the current computed value.
  • ❌ Confirm Sora 600 is among the loaded font weights.
  • ❌ Set the variable and rebuild css/ from scss/, committing the compiled output.
  • ❌ Visually diff a few pages; this changes every heading site-wide.
  • ❌ Reviewed by a human.
  • ❌ Code review by maintainers.

User interface changes

All headings become slightly lighter, matching the design.

API changes

None.

Data model changes

None.

Release notes snippet

Headings now render at font-weight 600, matching the VBE Stylesheet.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue tags: -educare-1.0.3

  • rajab natshah committed 5d235c6b on 1.0.x
    fix: #3625286 Set the heading font weight to the design system's 600
    
rajab natshah’s picture

Assigned: Unassigned » josebc
Status: Active » Needs review
Issue tags: +vartheme_bs5_educare-1.0.2
rajab natshah’s picture

Assigned: josebc » mohammed j. razem
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.