Problem with rootsizes

[davidealbanese]

Dear @daviddarnes,
I would like to change the fontsizes, but changes in rootsizes (in file _variables.scss) seem to affect only the line-height, not the fontsizes.

E.g.:

$rootsizes: (
  rootsize-0: 5,   // 24px line-height body text
  rootsize-1: 5,   // 28px line-height body text
  rootsize-2: 5,   // 30px line-height body text
  rootsize-3: 5,   // 34px line-height body text
  rootsize-4: 5    // 38px line-height body text
) !default;

[daviddarnes]

Hi @davidealbanese!
Hmm, that doesn't seem right. I looked at the Sassline docs and that appears to be the right way to change the font sizing. Maybe I'm not implementing it correctly? You can change the overall font size with :root { font-size: 10px } but I don't think that's the right way?

[daviddarnes]

Edit: I've found that using the following works even better as it gives a wider spectrum of sizing while keeping the typographic scaling:

:root {
    font-size: 70%; // 0px                    ~ Mobile first
    @include breakpoint(break-1) { // 640px   ~ Small tablet up
      font-size: 70%;
    }
    @include breakpoint(break-2) { // 800px   ~ Large tablet up
      font-size: 80%;
    }
    @include breakpoint(break-3) { // 1024px  ~ Desktop up
      font-size: 90%;
    }
    @include breakpoint(break-4) { // 1600px  ~ Large desktop up
      font-size: 100%;
    }
}

Note that this percentages were made up just on the fly, recommend you check how they look at different browser sizes for readability and so on.

I realise that this bypasses Sassline in a somewhat cheeky manner, but this is far simpler than running through the whole process of getting the precise setup using the Sassline docs.

[davidealbanese]

Dear @daviddarnes, thank you!

[LuxMiranda]

This saved my life, thank you.