Skip to content
Submitted 11 months ago

Blog preview card using clamped font

Aleš Zima•420
@Esosek
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

  1. 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?
  2. 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
    @techyjcPosted 11 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
    0
  • Ahlam•300
    @AhlamAb22Posted 11 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

    2
  • John Carruthers•310
    @techyjcPosted 11 months ago

    Looks great by the way.

    0

Please log in to post a comment

Log in with GitHub

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