This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
What is the difference between px and em?
Meet the Units
“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 is 12pt, 1em is equal to 12pt. Ems are
scalable in nature, so 2em would equal 24pt, .5em would equal 6pt,
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.
Points (pt): Points are traditionally used in print media (anything
that is to be printed on paper, etc.). One point is equal to 1/72 of
an inch. Points are much like pixels, in that they are fixed-size
units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a
few fundamental differences. First and foremost, the current
font-size is equal to 100% (i.e. 12pt = 100%). While using the
percent unit, your text remains fully scalable for mobile devices
and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
Info taken from http://kyleschaeffer.com
1 em = take font size from your Document font-size. It is relative in nature.
100% = take size also from document font size.
General
12pt=1em=100%=16px
In Best Practise Use % because it is relative to your width, it will automatic adjust device to device.
Related
I've read quite a bit about the "em" measurement for "font-size" and I've noticed that some say that especially disabled users benefit from "em" because they can adjust the size of font.
I'm new to CSS & HTML and I do not understand how this really works.
As I understand I can always - as a user - enlarge the viewing size in my browser. Doesn't this also work when I use "px" all the time?
Em represents a page's default size, so for example, 1em might be 12px, but for larger screens may be something else, perhaps 16px. 2em would be twice that size of 1em.
The takeaway is em scales with the screen resolution and is a good choice for responsive design.
Px on the other hand is a specific, fixed sizing guide, where a pixel is one square on a screen. So 12px on one screen may look small on a larger screen.
I recommend using em for most purposes unless there's a good reason you need a specific pixel size.
What are the differences and implications of applying Css to some element in mobile application such as:
.content{ font-size:80%;}
.content{ font-size:10px;}
.content{ font-size:1em;}
And how does this affects elements letter-spacing, line-height and word-spacing .
In addition what is typical different in font-style: oblique and italic.
Have a look at pxtoem it depend on what you want to do if it is responsive or not and how you would like your UI to be.
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.
Points (pt):
Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%):
The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Read more
Why em instead of px?
Pixels vs. Points in HTML
I am building a responsive app targeted to desktop, tablet and mobile phone using HTML and CSS but I am not sure what unit font size should I use that the font fits well in any size screen. What's difference between em, px, pt and percent? What's the best choose for me?
I would like to hear real experiences about it in responsive apps for desktop, tablets and mobile phones
I would be thankful for any help!
You might want to take a look at this article: little link.
Update: Here's a tiny bit of explanation about how this applies in your case:
px: a pixel is a tiny square (generally) in your device's display that can show only one color at a time. Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you're basically telling the browser that each letter should be 12 pixels high (approximately -- different letters vary in height a bit, but the relative difference is preserved).
percentages: font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
pt: 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches (again, different characters differ a bit).
em: em is the width of the letter 'm' in the selected typeface, basically the same as percentage, except that 1em is 100% and 1.5em is 150%.
So your choice would probably be px since it would preserve the logical proportions of text size to other sized elements.
Various dimensions are
“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One problem with the pixel unit is that it does not scale.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Viewport units : - These are relative to the view port. They are new in CSS3
3.2vw = 3.2% of width of viewport
3.2vh = 3.2% of height of viewport
3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
see kyleschaeffer.com/.... and css-tricks.com/....
But to achieve responsive typo look at https://stackoverflow.com/a/21981859/406659
It seems to me the best will be the incoming rem and vmin units as documented here.
To cope with older browser you may want to have some CSS fall backs defined something like:
p, li
{
font-size: 12px;
font-size: 0.75rem;
}
or
p, li
{
font-size: 12px; /* old */
font-size: 1.2vm; /* IE9 */
font-size: 1.2vmin;
}
(credit to Craig Butler)
Try using a mix of px, em, and rem.
Chris Coyier explains in this post that using px for your document, rem for your modules (ie. sections of your page), and em for text elements within your modules, the page will scale cleanly.
I've been using px for almost all the measurement related styling, but I wanted to know the best places for the use of pixels (px), percentage (%), points (pt) and em.
I've seen the use of em and (I believe) points in typography, but I don't know the best way to use them.
Where should either be used, and why?
pt or cm, in, mm etc. are most used for print stylesheets, as they're most fit for measurements on the physical properties of paper sheets, and the render of printers.
em and en (and the new rem, and more interesting units such as ch) are glyph relative units, and as such are suitable for text styling, in correspondence with absolute units at the root element (e.g. px units at the body).
another interesting uses: ex units (the height of the 'x' glyph in the font) to set vertical measures in relation to text, ch to indent lines.
px are absolutely rendered so one can design a pixel-perfect (or fixed) layout based on these units, applied for containers, or on various widgets demanding fixed size (buttons and the like). disclaimer: absolutely is an over-statement, as pixels are rarely absolute, and has many factors affecting the rendered outcome - see this article about px as an angular measure.
% are mostly used in conjunction with an absolute unit at the top container, and are applied in various CSS techniques, such as the faux centered container. these units are also very handy for layouts that are fluid by nature. others, like the viewport relative vh, vw and vmin, may be used regardless of the parent's units.
all of the above is based on my personal views, as this subject is open for debate, and CSS techniques will keep evolve and we'll see more uses of the specifications and capabilities we had never thought of. it's mostly the creative use of those tools that scopes or favors the use of one unit over another.
It used to be that these distinctions mattered: for example, back in the IE6 days, you should never set your text using px, because then it couldn't be zoomed. That is, back in the day, browsers actually treated px as a number of pixels.
These days, browsers have conformed to web reality: most people use px everywhere, for almost everything. Thus px is now defined as an angular measurement, which essentially means that px behaves just fine in any zoom setting and on any size or DPI device.
Similarly, as part of conforming to web reality, all other units are defined in terms of px, so there is really no reason to use them unless it happens to be more convenient for your case. The only exception is, of course, percentages, since they allow you to specify values in relation to parents' measurements.
Details from the spec:
in, cm, mm, pt, and pc are all defined relative to px, since in practice all devices follow "For a CSS device, these dimensions are ... anchored ... (ii) by relating the pixel unit to the reference pixel." And as discussed, the "reference pixel" is an angular measurement that varies depending on DPI settings, screen size, zoom level, device type and so on.
1em equals the computed font-size of an element, which is usually defined in px. If that size itself is defined in ems or exs, the browser then looks upward until it finds a px to be relative to, eventually falling back to the default font-size (usually 12px).
1ex equals the height of the letter "x" in the defined font-size if possible, but usually (?) falls back to 0.5em.
Use px for elements that are of a set size.
Use percentage when you need the element to be in proportion to the window size or parent element size.
em is the standard for text, it adjust according to screen size on a mac. Make it a habit, there's plenty of good blogs on why to use em, em is not just for font properties it also comes in handy with other elements like div, inputs etc. There may be consequences when using px for font size, there's also situations where px and % will be more ideal, it' takes trial & error to understand fully.
There are no real rule on what to use it's all according to the desired effect. As you create you will test your site in different resolutions and adjust the browser size to see how it appears from a variety of users points of view.
Consider cross browser compatibility & resolution with em,
Consider resolution with percentages,
Disclosure: I am a sysadmin, not a web designer.
I generally use em for padding around images, so as to keep the padding sized according to the text it keeps away from the image.
I use % to handle liquid/fluid layouts sometimes, though most often a fluid layout will just be 100% of the browser but with fixed width (px) columns.
I use px to handle column widths, headers, etc. The height and width attributes of an <img> tag are of course in pixels by default, and an image will render best if you don't ask the browser to resize it from its native/original resolution. In some cases, you need to use px on fonts, when the font has to work with an image (i.e. a spanner icon next to the word "Tools"). If possible, I always use UTF-8 fonts instead of images.
I have designed and developed more than 10 sites, but I still have a doubt about the correct unit I should use. Should it be px, em or %?
EDIT 1: FOR LAYOUTS (Especially for container boxes)
Different units depending on context. If there was one that was best for every situation, then there wouldn't be so many units.
As rules of thumb go:
If you are working on screen media:
Use % for font sizes
Use px for images
Use px, %, or em for box sizes
Use ratios for line height
If you are working in print media:
It might be wise to avoid px (this is not a hard rule by any means) and everything else is fair game. It really depends how much control you want.
There's no real right or wrong, but as a rule of thumb:
For anything you want a certain, fixed size, use PX
For anything you want to scale with font-size, use EM
For anything you want to scale to the available space in the window/container, use %
Each used to have specific advantages or disadvantages in different browsers when it came to users scaling the browser's base font-size/zooming, but more recent versions of the browsers by-and-large get around these issues by scaling everything, not just font-size.
If you're talking about font-size then px and pt are not ideal.
Ems and Percent units are scalable, therefore they are far more accessible - friendly for the visually-impaired. They also scale down well for mobile phone users.
Px and Pt units do not scale upward for visually-impaired users, or downward for mobile phones.
If you're talking about layout or containers then it depends on the type of design you want - fluid or static - and there isn't necessarily a "right" answer.
Without going into an example, it's difficult to advice. Do you have a site in mind we could look at?
Use the unit you need in the specific context.
Unit Description
====================
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)
source: http://www.w3schools.com/css/css_units.asp
For flexibility and accessibility I recommend using % for horizontal measures (relative to the user's screen), and em for vertical measures (relative to the user's font setting).
For fixed width layouts
For as much as pixel perfection I would suggest to use PX for width ,height, margin, and padding
for line-height use unit-less value like {line-height:1.2}
for typographic elemets use {font-size:62.5%) for body then use em for other elements
in HTML for <img> always use unit-less width and height .