Submitted 9 months ago

Blog preview card using clamped font

Aleš Zima• 390

@Esosek

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, would like to get your opinion on font-sizes.

I prefer using rem for font-size so it scales nice with users setting in the browser. Is it a good practice to scale fonts according to vw size and clamp it to rem?
How can I easily apply a base text size? Will the code below scale every child font-size?

body {
font-size: 0.8rem;
}

@media (min-width: 40rem) {
body {
font-size: 1rem;
}
}

.child {
font-size: 1rem;
}

Thanks! Aleš

Community feedback

John Carruthers• 310

@techyjc

Posted 9 months ago

Hi Aleš,

The default base text size is 16px; so if you're using REM it is based on the Root element.

You define your root in CSS

:root { --ff-base-size: 16px; font-size: var(--ff-base-size); }

Depending on what you are doing em might a better option as it uses the font-size defined in the parent element and scales from there.As you might require different base font-sizes depending on a specific nested set of elements.

(I think that's right... I'm sure someone will correct me if I'm not...)

Marked as helpful

Ahlam• 300

@AhlamAb22

Posted 9 months ago

As @techyjc said, you need to define :root instead of repeating the size each time. but you are right about rem, it is not recommended to use px

John Carruthers• 310

@techyjc

Posted 9 months ago

Looks great by the way.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord