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
- Install drupal/cms with the Educare site template.
- Inspect any heading on the front end.
- Computed
font-weightis 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/fromscss/, 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.
Issue fork vartheme_bs5_educare-3625286
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
Comment #2
rajab natshahComment #5
rajab natshah✅ Released vartheme_bs5_educare-1.0.2
Comment #6
rajab natshahComment #7
rajab natshah