1. Font sizes and margins for all text elements (the typography: headings, paragraphs, etc.) set in em
. To be easy to scale while maintaining the proportions of the padding (see point 4).
1.1. For titles as a progressive enhancement, you can optionally specify the font size in vw
. View example — codepen.io/paulradzkov/pen/jqYqgY
vw and vh is already widely supported (caniuse.com/#search=vw)
if you don't make up for China.
2. The size of the form elements (input button), their fields and sometimes the boarders to ask em
. They were the same scale with the surrounding text. And also see point 4.
3. The width of the grid columns, sidebars and other layout elements in the General case, be set in %
3.1. If the width of something depends on its content, not from the width of the viewport, it is better to use rem
* or to impose through flex without specifying the width explicitly.
3.2. Padding layout elements, the gutter between the columns in the rem
*. Sometimes the design must be specified in %
4. The size of the font larger modules is better to ask in the rem
*. For example, we write:
font-size: 1.2 rem;
font-size: 0.8 rem;
Due to the fact that we have items 1) and 2) in em-Ah, fonts and form in promo block in the sidebar and will change again at 1.2 and 0.8 times. However, if you can stick it .promo inside .sidebar, the font size of the promo block will still be 1.2 times more than the default text. Ie not depends on the context.
5. For @media statements recommend the use of em
, because earlier browsers was a bug (it seems everything was already fixed) when a user has the page scale (
), there is an unwanted horizontal scrolling. I always wrote in the px
and never with such bugs are encountered.
6. If you want to scale the entire site, then using @media queries you can change the font size of html element in px
. Then all that was set in rem and em will respond to this change.*
— if you do not change or plan to change the font size of the html element, then everywhere instead of rem
you can safely write px
. Nothing will change.
All other units of measurement are used in particular cases. For printing you may need a mm
; for the height of the fixed elements — vh
for typographical frills.