@crossinguard
Posted
Nearly identical, great job!
Small detail but the location and links are slightly off for the font weight (bold/700 vs semi-bold/600). Both are used in the card design, which a fun treat on top of the black pixel adventure you just went through.
One other consideration is the font size being fixed in place. Your card looks great at all sizes, has the correct font sizes, and handles browser zoom just fine. However, changing the font size in the browser settings does not interact with your card. Another small detail but worth thinking about.
Marked as helpful
@ha308ing
Posted
@crossinguard thank you for such valuable feedback!
to consider font size set in browser, css font-size should be set with percentages, right?
@crossinguard
Posted
@ha308ing Yup!
We can set the root font size as 100% (representing 100% of the browser controlled font size) and then use the body and other selectors for our default design-spec-aligned sizing in rem
.
html {
font-size: 100%;
}
body {
font-size: 0.875rem; /* 14px */
}
h1 {
font-size: 1.5rem; /* 24px */
}
Marked as helpful