skip to Main Content

Does Zurb Foundation 5.2.3 return accurate rems using rem_calc()?

Using a base of 12px, Foundation’s rem calculating function rem_calc() says that a font size of 148px should equal 9.25remrem_calc(148) = 9.25rem;. The output is visually smaller than what Photoshop says should be 148px.

Pluging in the base font size and size to be calculated in Rem Calculator outputs 148px = 12.33rem. Manually defining a font size of 12.33rem matches Photoshop.

Where does the difference come from in Foundation? Am I using this function wrong?

Edit:
I am not using the wrong REM base, or if I am it’s becuase foundation is not looking for it properly. As defined in very top of Foundation Settings.scss, before @import "foundation/functions"; is called…

 $base-font-size: 12px;
 $rem-base: $base-font-size;

2

Answers


  1. Chosen as BEST ANSWER

    The answer to this question is that in Foundation 5.2.3 $rem-base must have a defined font pixel size, simply declaring $rem-base: $base-font-size; is not enough.


  2. You are using wrong base:

    // $rem-base: 16px; // default base
    @debug rem-calc(148); //2.25rem
    
    $rem-base: 12px;
    @debug rem-calc(148); //12.33333rem
    
    @debug rem-calc(148, 16);// again 2.25rem with the 16 base
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search