20

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!

dextervip
  • 4,999
  • 16
  • 65
  • 93

4 Answers4

23

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.

Michal Karbownik
  • 1,138
  • 14
  • 28
Chris
  • 26,544
  • 5
  • 58
  • 71
  • 2
    It doesn't answer my question yet. It doesn't say how units works in different screens and devices, maybe in real scenario It is different. – dextervip Sep 04 '12 at 21:07
  • 10
    Few clarifications: 1 em = 'width of the "m" letter of the selected typografy, at the defined font size'. "pt" refers to a "real" size, since it is defined based on a real length measure (an inch is an inch regardless of screen size) "px" is relative to screen resolution. Same screen in different resolutions will show different sizes. A pixel in an iPhone is not the same size as a pixel in a laptop screen. Also interfaces are not the same between devices, so I believe the best option is to have different screen size definitions depending on each type of device. – AlvaroGMJ Sep 04 '12 at 21:32
  • 1
    This is actually a misleading answer. The "px" value represents a *relative pixel* (or device-independent pixel), not an actual physical pixel on the display. Scaling for high DPI displays, for example, will multiply the "px" value you provide to arrive at the actual number of physical pixels used. This is the unit I recommend using for modern web apps/sites and you'll see a lot of frameworks use it. "pt" is defined differently on different platforms and it's best to avoid this. – Brandon Paddock Jun 10 '16 at 17:39
5

Various dimensions are

  1. “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..
  2. 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.
  3. 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.
  4. 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.
  5. Viewport units : - These are relative to the view port. They are new in CSS3
    1. 3.2vw = 3.2% of width of viewport
    2. 3.2vh = 3.2% of height of viewport
    3. 3.2vmin = Smaller of 3.2vw or 3.2vh
    4. 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

Community
  • 1
  • 1
aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242
  • 1
    This is a very misleading answer. "px" values are *NOT* screen pixels. They have relative or device-independent pixels, and they *are* scaled based on the DPI of the display. – Brandon Paddock Jun 10 '16 at 17:42
  • There are 96 css pixels per inch -- they do scale -- see `window.devicePixelRatio`. – Mingwei Samuel Jul 07 '21 at 22:06
3

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)

ErichBSchulz
  • 15,047
  • 5
  • 57
  • 61
3

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.

Jim Clouse
  • 8,774
  • 6
  • 32
  • 25