I need to create a graphical element that needs to be exactly twice the height of a capitalized letter.
I have the font size defined externally with JS using 'px' and then the graphic is drawn based on this same value.
As a rule of thumb, I have been using 1.5x of the px font-size value to be the capital height. However, this is not accurate enough and changes at larger sizes.
so what exactly does font size define and is there a way to know its mathematical relation to a capitalized letter in a font?
In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x.
Does 500w mean that the width of the image is 500 pixels? If so, why is it w and not px, as used when in the size attribute?
Does 1x means a pixel density of 72pixels/inch
Why does an image have pixel density? I thought pixel density means the number of pixels within a physical length/space. For example, the number of pixels per inch. But a digital image doesn't occupy a physical length/space, it only occupies a number of pixels. So what does the pixel density of a digital image mean?...This is my guess, please tell me if I'm right: An image only occupies a number of pixels, but it could have been intended for a physical length. For example, an image of a button of 144 pixels width was intended to occupy a physical space of 1 inch. Therefore, it was intended for a device of 2x. We tell the browser this by specifying 2x in the srcset attribute. To sum up, the pixel density means the pixel density of the system the image is intended for.
#1. The 'w' value that appears to the right of each file listed in the srcset attribute of the <img> tag is known as the "w descriptor." The value of each 'w' descriptor is the intrinsic width, in pixels, of the file the 'w' descriptor is associated with. "Intrinsic width" means the native width of the image when it is was originally created or the last time its width changed. You can view a file's intrinsic width in Photoshop or the Windows 10 Photo Viewer (click the three-dot menu "..." and select File Info). "px" is not used to describe intrinsic width because it is used to describe various other types of image widths. The 'w' descriptor describes a specific type of image width that is measured in pixels - intrinsic width - and is used only with the srcset attribute of the <img> tag.
#2. "1x" does NOT mean a pixel density of 72 pixels per inch. That's because pixel density is NOT device resolution. Pixel density is the ratio of browser image width in pixels (known as "CSS pixels") to the native pixel width of the device's display screen. Pixel density has nothing to do with device resolution.
#3. An image does NOT have pixel density. It has only two types of width measurements - both in pixels. One width measure is the width the browser is displaying the image at. The other width measure is the intrinsic width of the image (see #1). For example, suppose I have an image whose intrinsic width is 800px wide. Also suppose that the browser is displaying the image at 650px wide. These two measures are not related in any way (this is NOT pixel density!) - they're just two different ways an image can be viewed which results in two different width measurements.
I've answered your questions directly, without any other context or explanation, and I'm certain that you are scratching your head saying, "That didn't help!" That's the exact same reaction I had when I first started to educate myself about how inline images (images that are specified with the <img> tag in HTML) are selected and displayed by browsers. I suggest you read this post to begin to gain a thorough understanding about how inline images are specified in HTML markup and how browsers select the appropriate image from the srcset attribute of the <img> tag. You can expect several weeks of study before this topic comes into sharp focus. And when you've finished mastering inline images, background images are waiting for you to master with a completely different set of rules. :>)
We have a number of divs on a page containing text. The text is explicitly set to a certain font-size via CSS. In some circumstances the font-size is increasing without our intervention. It seems to be related to the length of the text in the DIVs. i.e. once it gets to a particular size adding a character increases the font-size, removing it again reduces the font-size.
We haven't got any fancy libraries included to scale the font.
In chrome dev tools it shows the variation in the font set via CSS, and then the computed size here:
Why does the font go from 16px to 19.555555px? What are we missing?
thanks!
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 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.