search

CityOfDetroit / COD-Design-System

Design system for the City of Detroit.
https://cityofdetroit.github.io/COD-Design-System/
MIT License
1 stars 3 forks source link

Update display fonts to match headers #247

Closed maxatdetroit closed 3 months ago

maxatdetroit commented 4 months ago

The Problem

Similar to the findings in https://github.com/CityOfDetroit/detroitmi/pull/1579, we found that our bootstrap configuration has our heading elements styled differently than the bootstrap display fonts.

This makes it challenging to use display fonts or headers interchangeably when needed.

The Solution

Update the bootstrap configuration in the design system to set the display font sizes and weights to match their heading counterparts. E.g. h1 should have the same font size and weight as display-1, h2 the same as display-2, etc.

sreidthomas commented 3 months ago

The file _detroitmi-style-guide.scss is where I would make these changes @maxatdetroit?

And also, I am adding the sizes I came up with from the other PR?

$display-font-sizes: (
  1: 2.75rem,
  2: 2.375rem,
  3: 1.875rem,
  4: 1.5rem,
  5: 1.25rem,
  6: 1rem
);
maxatdetroit commented 3 months ago

No, the bootstrap variables (like the display font sizes) should be defined in _bootstrap-variables.scss.

Yes, the sizes should be what you came up with from the other PR.a