Rem & em units in interface design and prototyping

[tdc]

Hi everyone!
Please help
Question:
in CSS frameworks dimensions now is set up by rem em units, and also it can be units like 1.25
in Sketch we use pixels, and subpixels are not the best practice.

But how I can make a proportion in margins and paddings when I design an interface

for example 1rem = 16px - and i need to set padding to 1.618rem ?

[Just-B]

I know about rems, ems, frameworks, padding, margins, etc., but even after reading what you’ve written two or three times, I still don’t know what you’re asking.

But how I can make a proportion in margins and paddings when I design an interface

for example 1rem = 16px - and i need to set padding to 1.618rem ?

I don’t understand. If you want to set the padding to 1.618 rems, there’s nothing stopping you from doing just that. In the CSS you’ve pasted in, you’ve set the horizontal padding values to 3.0 rems, so why can’t you just change it to 1.618rem?

I have a feeling that’s not what your’e asking, though. Maybe you could rephrase your question.

[tdc]

Thanks very much for your answer

Example

I need to set up fonts proportions in Sketch or PS

Proportion is 1.414 (Augmented fourth)

1rem = 16px

question 2rem = 45.248px

How to illustrate it in Sketch or Photoshop?

[orderandchaos]

In my Sass functions I have a remCalc that’ll convert pixel units to rems. You can find the function I use in this file: https://github.com/sarcoma/js-webpack-micro/blob/master/src/sass/_functions.scss. But you may be better off finding a simpler one online.

I also wrote a handy calculator for this a few years back https://modular-scale.com/. It calculates a modular scale with ems at the base size and at base 16 (ems based on 16px)