Problem with base font and responsive

[mercs600]

Hi, typi is awesome library. I'm using it in my second project and I have one issue. I set base font-size as 15px; $typi map below, where base is 15px and sm is 13px;

$typi: ( base: ( null: ( map-get($font-sizes, 'base'), map-get($line-heights, 'base') ), xs: ( map-get($font-sizes, 'xs'), map-get($line-heights, 'xs') ), sm: ( map-get($font-sizes, 'sm') map-get($line-heights, 'sm') ), ..... );

I have also second map for headings. $headings-sizes: ( h1: ( null: (30px, 39/30), // default is xs sm: (22px, 28/22), md: (36px, 48/36), ), h2: ( null: (22px, 22/29), // default is xs sm: (15px, 22/15), md: (24px, 36/24) ), ..... );

Next I merge it to one $typi map $typi: map-merge(map-merge($typi, $headings-sizes)

I'm using typi with em units. h1, .h1 { @include typi(h1, $rem: false, $typi-breakpoint: mappy-bp); }

So... when comes to my problem: default case: my H1 as base has 30px and base font size is 15, so H1 has 2em and this is ok. rwd case for example on SM breakpoint where my H1 has 22px and base font-size has 13px; so H1 should be around 1.692em, but I got 1.46667em;

My question is how can I fix it ? ;-)

[zellwk]

Typi is designed such that your font-sizes for other maps are always relative to the $base-font-size. This is done to keep font-sizes related to each other when base-font-size changes.

If you want to set your sizes manually, (hence the pixels), your best bet is to calculate either the px or em value with respect to the $base-font-size for now.

Am I making sense? Sorry for the confusion.

[tbaddade]

Hej,

i think, i have the same problem.

My setup with em for h1:

$typi: (
    base: (
        null: (12px, 1.4),
        desktop: (16px)
    ),
    h1: (
        null: (24px, 1.3),
        desktop: (2.75em)
    )
);

Compiled to

h1 {
    font-size: 2rem;
    line-height: 1.3;
}
@media all and (min-width: 992px) {
    h1 {
        font-size: 2.75rem; // 16px * 2.75rem => 44px
    }
}

Thats correct, but if i change the h1 font-size to 44px in the map, the compiled value of font-size is 3.66667rem (16px * 3.66667rem => 58px). I would have expected 2.75rem now.

Does Typi work correctly or is this a bug.

[zellwk]

@tbaddade When you use em or rem, Typi uses the value without doing any conversion, This is done to ensure it's always relative to your base font-size. So, the value you're getting is correct.

When you set to 44px in the map, Typi uses 44/12 = 3.66667. The idea is to make this value relative to the base null size initially. Now that you say it out, I think it should be changed. So, I'll label it as a bug and find time to work on it whenever I can.

[adamrobinson]

I'm pretty sure this used to work as mercs600 intended. I've used it myself on several projects stating pixel values and its calculated the correct font-size in rems. I've recently updated to the latest version and now im having to state the new maps in ems to get the correct pixel values.

[zellwk]

@adamrobinson The approach is NOT to think in pixel values for now. It's probably easy to get messed up. If you can, think in em immediately. I'll try to find a way to fix this inconsistency as soon as I get time on my hands, but I don't know when I'll have time :(

[christopherdarling]

@zellwk thanks for a great library, using it for the first time here. Just to add, I've run into the same problem that tbaddade describes.

[zellwk]

@christopherdarling Got you. I'll find time to work on it soon. I'm so ashamed that I haven't found time in so long ><

[christopherdarling]

No worries - totally appreciate it's difficult to make time sometimes. Thanks for replying so quickly