typeplate/typeplate.github.io

Scaling font sizes

Closed this issue · 1 comments

I get how to define a scale for the headers but how do you reduce or increase the base font-size for a specific section whilst utilising all the fallbacks in Typeplate etc?

I'm not sure whether to use:
font: @weight ~"@{font-size}%/@{line-height}" @font-family-sans;
or
.base-type(@weight, @line-height, @font-size, @font-family-sans, @serif-boolean);

...and even then, what do I need to change?

I'm using the LESS version btw.

Thanks!

How do you reduce or increase the base font-size for a specific section whilst utilising all the fallbacks in Typeplate?

If you want to increase or decrease the font-size for a section you can use the greek level classes. With Sass we do this using extends which is pretty similar to LESS.

h1.title {
    @extend .delta; //The Sass Way
    .delta; // The LESS Way
}

p.intro {
    @extend .beta; // The Sass Way
    .beta; // The LESS Way
}

If you want to increase or decrease the base font-size overall -in a responsive way- then see issue #64