This question already has answers here:
Google Font size 10.5 px (.5) the correct way and multibrowser support
(3 answers)
Closed 7 years ago.
Is "10.3px" is valid property value in css?
Can i apply value like this in pixels?
Eg:
p{
letter-spacing:10.233px;
}
Pixel is the indivisible unit for display. So browser can't "draw" .3 px. This will lead to different render of font in different browsers
If you need fine-grained control, sizing fonts in pixel values (px) is an excellent choice (it's my favorite). On a computer screen, it doesn't get any more accurate than a single pixel. With sizing fonts in pixels, you are literally telling browsers to render the letters exactly that number of pixels in height:
You can use it for percentage but not for pixel.
e.g.
p{
letter-spacing:3.5%;
}
In case of pixel. the values are truncated. So 10px, 10.233px, 10.9 px will show same letter spacing...
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am using Ionic 2 for the development of an app and I need to preview the app in different sizes.
Currently, I am using vw in all the sizes including font-size, padding and so on, but when resizing the font it sometimes becomes a bit small and even sometimes the text is not readable.
For that reason, I would like to know what is best to use in this case:
px
%
vw
wh
em
Or do I need to use also the #media and support different font sizes?
Any thoughts?
Note that I only mentioned the ones you asked about.
Here you can see the full list of CSS measurement units: CSS Units in W3Schools
Rather than telling you which one is the "right one", I would rather want you to understand what each one actually is.
Pixels (px): Absolute pixels. So for example, 20px will be literally 20 pixels on any screen. If a monitor is of 1980x1200, and you set an element's height to 200px, the element will take 200 pixels out of that.
Percentage (%): Relative to the parent value.
So for this example:
<div style="width: 200px;">
<div style="width: 50%;"></div>
</div>
The inner div will have a width of 100 pixels.
Viewport height/width (vw/vh): Size relative to the viewport (browser window, basically).
Example:
.myDiv {
width: 100vw;
height: 100vh;
background-color: red;
}
Will make an cover the whole browser in red. This is very common among flexboxes as it's naturally responsive.
Emeters (em) and Root Emeters (rem): em is relative to the parent element's font size. rem will be relative to the html font-size (mostly 16 pixels). This is very useful if you want to keep an "in mind relativity of sizes" over your project, and not using variables by pre-processors like Sass and Less. Just easier and more intuitive, I guess.
Example:
.myDiv {
font-size: 0.5rem;
}
Font size will be 8 pixels.
Now that you know, choose the right one for the right purpose.
w3schools.com has a pretty nice summary about css units.
I for myself do always use em. Why?
First of all, em is relative to your font-size. So as w3school says, 2em would be 2 times of the font-size you've defined in your parent container. So you may define a specific font-size for your html tag and use whatever em you want, to handle relative font-sizes for various tasks.
Also, em is covered in mostly all browsers.
At least, you may use #media-queries to handle responsive font-size handling for mobile devices. So you may consider using #media-queries combined with a relative font-size by using em.
this is probably gonna get closed, but I love using the em units because they are very scale-able, esp in mobile browsers that being said, I do use media queries along with them. I really depends on what youre doing.
A good site will probably compose of a few ems and a few pxs ratio, so what ever your end goal is will should dictate which you'll use,
if you
understand each ones application youll be able to end up with which one you like more. W3Schools and W3code both have good articles on them...
This question already has answers here:
Web and physical units
(2 answers)
Div width in cm (inch)
(6 answers)
Closed 9 years ago.
Every product in my eshop must be displayed in it's real life size (cm or mm) independent on the resolution my visitor is using to view it.
I'm searching for a solution that works on all browsers.
How can this be done?
How well do mm and cm measurements in css work?
As far as I know, in css you can use cm, mm and in as units for any property that takes a length value, so
height: 100cm;
Will set an element's height to 100cm as measured on screen. However, for a quick test I created a webpage containing the following:
<div style="height: 10cm; width: 10cm; background-color: red">
This div appeared 10cm on one monitor, 8.9cm on another, 6.35cm on a tablet and either 2.05cm or 3.3cm on my phone depending on the orientation. So while you can set absolute lengths in CSS, there really is no guarantee that is what you are going to get. Unfortunately I don't think there are any more accurate alternatives either, although you could always try slaughtering a goat to improve your chances.
the spec
I have a couple of specific questions about font size:
Is pt (I.E. 12pt) standardized? I think I read somewhere that pt = 1/72 of an inch. However, the size of 24pt font in photoshop is significantly different from size 24pt font in css.
What exactly does font-size determine? Is it a sort of unstandardized arbitrary description about letter size or does it actually refer to the specific height or width attribute of letters?
Thanks Stack!
font-size is the baseline height of the font (the height of a capital H character) plus a little room above it (the ascender) and larger amount of room below it (the descender).
For a particular font at a particular font-size, the baseline height will always be the same size. Below are some examples, based on measurements of the Arial font:
font-size baseline height
10 7
11 8
12 9
14 10
In theory, for CSS, pt is a rough approximation of the baseline height in px. For instance, a font-size:9pt has a baseline height of 9px, which corresponds to font-size:12px. In practice, I've sometimes found that pt is larger than the baseline height by 0.5 to 1.0 px.
Here's a jsfiddle showing a side-by-side comparison of capital H's in px and pt.
In most PSDs I've seen, a font specified as 12pt is in fact 12px. But this may vary. When in doubt, measure the baseline height of the text and convert backwards from that to a font-size in px. For instance, if a capital H has a height of 9px, then the font-size is 12px. Sometimes antialiasing in a PSD makes it difficult to accurately measure the baseline height.
You could take a look here from a similar question about font size in Photoshop and CSS.
While here You can find a nice conversione table: you can notice that PT in Photoshop are equivalent to PX in CSS.. i think you shouldn't use PT in both.
Finally, here you can read something about the history of PT in typography (yes, you are right about 1pt = 1/72 inch) :)
It's usually better practice to measure font in pixels in CSS. Like the question you asked pt size is pretty arbitrary and varies upon the developers own definitions.
In CSS 2.1 (the current spec), pt is unambiguously 1/72 of an inch. The reality is different, though, and this is reflected in the CSS3 Values and Units draft, section 5. It describes two setups, using different “anchor units”. If the pixel is the anchor unit, an inch (in as CSS unit) need not be an inch (the physical unit, 2.54 mm), and hence the meaning of p may vary as well. This is one reason why pt in CSS need not match pt in some software.
The font size is a basic property of a font. Any relationships between it and dimensions of characters are up to the font designer, but font design is of course not arbitrary. The CSS 2.1 spec puts this rather vaguely, but the formulation is still useful (against many common misconceptions): “The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.” (And on the other hand, most glyphs use just a small part of the em square.)
"pt" in fonts is only for print CSS.
Here is a link which explains all differences between types of sizes
http://css-tricks.com/css-font-size/
You can go straight to the official W3C documentation on CSS for specifics of the font-size property.
And to your question about the meaning of pt in CSS, again the official documentation shows that yes, it is 1/72 of an inch.
Remember that in different applications you can zoom your screen, so think about these values more for printed, rather than screen, media.
1)
In print css, a pt is exactly 1/72 of an inch.
In screen
css everything is defined in terms of pixels, and a pt is defined as
1 1/3 pixel. But how large this is in physical measurements like inch
depend on screen DPI and vary greatly between devices. For this
reason, pt (and other physical measurements like in, cm etc.) is not
that useful in screen css.
2)
Font-size refers the the height of the "em-box" - a bit
simplified this is the rectangle which can contain all letters in
the font including ascenders and descenders. Individual letters will of course
often take up less space than the whole em-box. For example a
lower-case x will have space above and below, while a lower-case j
might fill the whole height of the em-box.
Font-size therefore indicates how much vertical space is required by a line of text, but the dimensions of individual letters and glyphs will vary relative to others depending on the letter and the design of the font in use.
Furthermore some fonts may have letters which extend ("bleed") even outside the em box, which is also a stylistic choice by the designers of the font. E.g. the letter "Å" will often bleed above the em-box.
I have noticed that you can use 1em and it will look different on different sites.
What is an em in proportion to?
The font used?
The biggest font size?
The page width/height?
See http://w3schools.com/cssref/css_units.asp
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
An EM is relative to the current element it is defined on. If you use relative sizes (like 0.9em), they multiply and can lead to unexpected dimensions.
Now, the default size of a font is not standard between browsers. And there's an issue with IE (at least older IE) when setting the font to a specific pixel unit. A good overview for font sizing can be found on A List Apart.
According to the W3C an em:
"is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element."
In other words, ems don't have an absolute size. They take on their size values based on where they are. For most Web designers, this means that they are in a Web browser, so a font that is 1em tall is exactly the same size as the default font size for that browser.
For most browsers, default value
1em = 16px
The em is defined as the height of the capital letter "M" in the current font and size.
https://web.archive.org/web/20131127083352/http://www.guistuff.com/css/css_units.html
As you know, you can specify dimensions with CSS in px or em. As far as I understand it, em means "line height of the current element's fonts". My approach currently is to always use px (also for margin which seems to be a controversial practice).
Question: Can I rely on the ratio of px and em to be the same across browsers? If not, then my manually specified margins between paragraphs will likely look odd because they so not match 1em anymore.
I believe that it is better to use em for margins but I have quite a base of existing code that always uses px margins.
No. ems are relative to the user's chosen font size, px aren't. The default font sizes of desktop browsers are about the same in pixels, but mobile devices in particular will vary even before user adjustment.
You should use em for a margin in text content that should be sized similarly to the surrounding fonts, and px for a margin that has to line up with images used by the page layout.
No, you cannot.
The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.