When to use% or em or ex with css font?

can someone tell me when to use%, em, ex as a unit of measure for fonts when working with css? confuse

+4
source share
1 answer

It really is up to you. For ease of use, stick with em or% as px is a fixed value and will not scale (or should not) on different devices. First set the main font size to the body (67% is popular) and then use em to resize it to your liking.


To snatch an answer from the Internet:

  • "Ems" (em): "em" is a scalable unit that is used in web document media. The value of em is equal to the current font size, for example, if the font size of the document is 12pt, 1em is 12pt. Ems are scalable in nature, so 2em will equal 24pt, .5em will equal 6pt, etc. Ems is becoming increasingly popular in web documents due to scalability and mobility on mobile devices.
  • Pixels (pixels): pixels are units of a fixed size that are used in on-screen media (i.e. for reading on a computer screen). One pixel equals one dot on the computer screen (the smallest split of your screen resolution). Many web designers use pixel units in web documents to create the perfect pixel representation of their site as it displays in the browser. One problem with the pixel block is that it does not scale up for visually impaired readers or down to fit mobile devices.
  • Points (pt): Dots are traditionally used in print media (everything that needs to be printed on paper, etc.). One point is 1/72 of an inch. Points are very similar to pixels because they are fixed and cannot scale.
  • Percentage (%): The percentage unit is very similar to the "em" block, with the exception of a few fundamental differences. First of all, the current font size is 100% (i.e. 12pt = 100%). When using a percentage unit, your text remains fully scalable for mobile devices and for accessibility.

- Source -

I highly recommend reading this article, it explains all the diagrams in detail :)

Hope this helps!

Yane

+7
source

Source: https://habr.com/ru/post/1302451/


All Articles