Related
I'm doing some graphics (in Javascript, if that's relevant), and I know you can size fonts with pt, px, %, etc. When looking up what px means, every site seems to have the same vague answer -- the size of the font in pixels. I'm wondering what exactly px represents. For example, if I have 20px, will 20 pixels represent the height of a capital A, a small e, a lowercase g or the difference between the bottom of the g and the top of the A? (I'm assuming it's the size of the A, but I just want to double check).
Furthermore, px is apparently relative to the view size. So if I do a fillRect(1,1,20,20), will this be the size of a capital A at 20px, or does the font size change on different devices independent of the graphics?
For example, if I have 20px, will 20 pixels represent the height of a
capital A, a small e, a lowercase g or the difference between the
bottom of the g and the top of the A?
None of them. It represent an abstract object called the "em-square". The height of capitals, the width of the glyphs, and various other measures of the glyphs are then defined in each font as proportional to the em-square. But often, none of the measures you see is exactly equal to 1 em-square size, or in your case, equal to 20px.
per http://www.unitconversion.org/typography/pixels-x-to-centimeters-conversion.html
10 pixels are 0.264583333 CM.
other than that, it can very depending on your font and the display resolution of the screen.
No, the size of one pixel px is not officially defined in a technical way.
Although I cannot tell you who exactly defines the value, if it's the pc-manufacturer or who it is and whether w3 guidelines tell these specifying parties to measure it from a certain distance depending on screen size, But the most specific and most helpful description of the "magic" px unit is
1 px equals the smallest width to make a line visible on the specific device.
given that the watching user stands at a device relative reasonable distance.
(see Official w3 Info about the px unit).
The little web application I am writing populates a temporary invisible container with some text, measures the resulting height, and then uses it to generate some guis based on that height.
This is done because, not all fonts are mon-spaced and as such need to be measured each time to determine how much space they will take up.
Now, I may need to scale the entire UI to fit a different screen size and was wondering if I can just scale the resulting height reliably.
Simply Put: Are all front glyphs guaranteed to be proportionate when scaled or can you have different glyph widths/spacing at different font sizes?
e.g. Will a font set at size 20 always be exactly 2 times the size of a font set at size 10?
EDIT: Here is another view of the test I did and posted in the comments below:
When you double font size, it is doubled exactly. But this does not mean that glyphs are scaled proportionally. The font size is simply a property of the font, not a property of glyphs. Glyphs are scaled, but the results are not and cannot be exact, due to the granularity of rendering: the abstract glyph shapes must be rasterized, i.e. converted to pixel maps, and this inevitably changes their shapes.
For example, consider the horizontal stroke of the letter “e”. The width depends on the font size, of course, but in rasterization, it needs to be mapped to one pixel, two pixels, or some other number of pixels. Even subpixel rendering does not change this; it just modifies the way rasterization works. Thus, the width of the stroke as rendered on screen (or paper) cannot exactly reflect the font size. And different strokes in a glyph will behave differently, so that an increase of font size does not mean exact magnification of a glyph.
I want to use the following character in a page:
<div>▼</div>
(it's a down arrow character). Is there a way to change its size? I'm not even sure how its initial size is determined anyway - can we apply a font size to it? Or is there some css scale attribute we can apply to it?
Or can I specify its exact width/height in pixels?
Thank you
You can use CSS to control it just like any other text.
https://developer.mozilla.org/en-US/docs/CSS/font-size
The size of the character is determined by the font family and the font size. Both of them can be set as usual in CSS, with the font-family and font-size properties (or even using old-fashioned HTML font tag). Setting font-size different from other text on the same line tends to cause uneven line spacing, but this does not matter if you are using the character in a block of its own, as the div markup suggests.
The character denoted by ▼ is not an arrow but U+25BC BLACK DOWN-POINTING TRIANGLE “▼”. Its relative size (relative to font size) varies a lot by font family, so you should primarily consider the font family choice, using a reasonable list of font families (with comparable size for this character), and only if needed consider font size too.
Just like any other font is controlled
<div style="font-size:x-large">▼</div>
The same way you control the size of any other character. Just set the font size.
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'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.