Communiquez avec les autres et partagez vos connaissances professionnelles

Inscrivez-vous ou connectez-vous pour rejoindre votre communauté professionnelle.

Suivre

What is the difference between "em" and "px" when defining font-size in css?

user-image
Question ajoutée par Mahmoud Ghazal , Senior Agile Project Manager , Telstra
Date de publication: 2013/08/25
Mohammad Ateieh
par Mohammad Ateieh , Software Engineering Manager , Bayt.com

“Ems” (em): The “em” is a scalable unit that is used in web document media.
An em is equal to the current font-size, for instance, if the font-size of the document is12pt,1em is equal to12pt.
Ems are scalable in nature, so2em would equal24pt, .5em would equal6pt, etc.
Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e.
to be read on the computer screen).
One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution).
Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser.
One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Source : Meet the units

Shivani Sharma
par Shivani Sharma , Manager , none

Hi _ Well these are the parameters used to define size to make the website browser compatible, pixels, 'px' are fixed size units, when page loads in different browsers, sizes varies as per browsers own default settings, some font might look smaller in one browser and bigger in the other, an em value is equal to current forn size, if it is12px that means12px=1 em, em values are scalable in nature, moreover, we have various devices which are captivating the emarket, so we have to design web pages/softwares as per their dimensions, so to make it suitable to run on every device smoothly we use em, percent values.....hope it helps....

هاشم المشارقة
par هاشم المشارقة , Key Account Manager , Advanced United Systems Ltd. ( A member of Taj Holding Group)

"em" allowe user to resize text ( zoom in or out ).however "px" don't allowe that it is absolute value.

Daanish Rumani
par Daanish Rumani , Product Manager , Publicis Sapient

As already answered em implies scalability of the size.
So 5em on a laptop screen would be evaluated to different amount of pixels than a on high definition monitor.
On the other hand pixels is the precise value that disregards the screen size and its pixel density.
Simply put, 5em would look the same size on a normal iPad as well as the iPad with retina display.
However 50px would be seen smaller on the iPad with retina display because it has a higher pixel density.

Amjad Ali
par Amjad Ali , UI Designer & Front End Developer , kalsoft

"Px" -  Pixels are browser dependent.
It is the absolute size that you would see on your screen.
"Em" - Are sort of like percentages.
Ems is referring to the base text size.
The value of1 em means the same thing as a value of100 percent.
But you can also say it in the opposite way: A percentage value is just an em multiplied by100.

Ibraheem Alibraheem
par Ibraheem Alibraheem , Senior Java Developer / Team Leader , Power One Software

there is another unit, pt (point).  It is little bit larger than px, i.e.12pt >12px

Utilisateur supprimé
par Utilisateur supprimé

em is universal and it looks good in pc & mac. At the same time it looks good though you zoom in & out in your screen. Where its completely opp to px.

More Questions Like This