@simeon4real
Posted
Hello Zac, I must say, I am ver impressed with your solution. This is stuff way above my skill level and I liked it. I'm yet to attempt this challenge myself. Aside from the accessibility issues pointed out in the accessibility report, I have just one suggestion to add.
Rather than resizing each heading and text font sizes individually, I think you should add
html {
font-size: 62.5%
}
This way, 1rem will always be === 10px. Calculation: 100% ÷ 16px(browser default) * 10px === 62.5%. Now, your font-size is 10px aka 1rem in your root.
What you could do on smaller screen sizes is to change the size of your root to say, 8px.
html {
font-size: 50%;
}
Now, 1rem === 8px. Calculation: 100% ÷ 16px(browser default) * 8 === 50%.
If you found my recommendation useful, you can upvote my feedback. I would appreciate that.
@zac-heisey
Posted
@simeon4real Thanks for the feedback! I'm still considering using some type of flexible type solution like you mentioned, but haven't got around to implementing that just yet.
I was looking at doing something like Matt Smith outlines here, where I would set a font-size rule on the :root element:
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
