Add basic typography styles for common elements #49
Conversation
styles/typography.css
Outdated
| @@ -5,3 +5,65 @@ | |||
| --font-family-serif: "Source Serif 4", serif; | |||
| --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro"; | |||
| } | |||
|
|
|||
| h1, .h1 { | |||
| font-size: 2.25rem; | |||
There was a problem hiding this comment.
I think we are supposed to keep the responsive text size for screens below 1200px, but I am not 100% sure about this.
There was a problem hiding this comment.
Ah – so all of this (except the parts that say "xs" and "xl", maybe?) would be for <= 1200px only?
There was a problem hiding this comment.
I think we are supposed to do both, i.e.
less than 1200px responsive text sizes with the new variables (i.e. H1 gets calculated with 2.25rem not 2.5rem)
greater than 1200px fixed font where it is 2.25rem not 2.5rem
But honestly this ticket was kind of confusing to me. I think @jcoyne has a better handle than I do.
There was a problem hiding this comment.
Yes, it was my understanding that we would continue to have responsive text sizes.
There was a problem hiding this comment.
Are the responsive sizes defined somewhere else? Do I just need to put most of these changes behind a breakpoint?
styles/typography.css
Outdated
| @@ -5,3 +5,65 @@ | |||
| --font-family-serif: "Source Serif 4", serif; | |||
| --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro"; | |||
| } | |||
|
|
|||
| h1, .h1 { | |||
| font-size: 2.25rem; | |||
There was a problem hiding this comment.
Yes, it was my understanding that we would continue to have responsive text sizes.
This adds basic styles for headers, paragraphs, and definition lists. Updates most styles to only apply to XL breakpoint, since below that they are responsive. Closes #44
thatbudakguy
force-pushed
the
update-typography
branch
from
225da4b to
ca23682
Compare
|
Updated to make most of the sizing styles only apply at >= 1200px. |
| } | ||
|
|
||
| p { | ||
| font-size: 1rem; |
There was a problem hiding this comment.
Why are these needed? Aren't these the defaults?
There was a problem hiding this comment.
🤷🏻 they were specified in the ticket. I can take it out if we want to just rely on browser default
| /* xs */ | ||
| @media (width < 576px) { | ||
| p { | ||
| font-size: 0.9rem; |
There was a problem hiding this comment.
Isn't this a challenge for accessibility? Some experts suggest no smaller than 1rem for body text. https://accessibe.com/blog/knowledgebase/ada-compliant-fonts
| @media (width >= 1200px) { | ||
| h1, | ||
| .h1 { | ||
| font-size: 2.25rem; |
There was a problem hiding this comment.
This will cause a font-size jump when you cross the threshold. Currently is scales smoothly to 2.5rem ( calc(1.375rem + 1.5vw);) which is the default size at 1200px width. Now it jumps down.
| } | ||
|
|
||
| dt { | ||
| font-size: 1rem; |
| } | ||
|
|
||
| dd { | ||
| font-size: 1rem; |
| } | ||
|
|
||
| dd { | ||
| font-weight: 400; |
This adds basic styles for headers, paragraphs, and definition
lists.
Closes #44