Do all font ascenders/descenders have the same space above/below? I'm trying to write a global stylesheet which will take away top and bottom space from h1-6 elements which I found to be no more than 8 pixels or so (which lowers as the h elements lower.) The reason I'm considering this is because I won't have any tall characters which will occupy the ascender/descender so I really have no usage for it (plus I need exact precision in the positioning of my elements.)
My question is if all fonts have the same ascending/descending space, or if it varies by font or OS or browser.
Do all font ascenders/descenders have the same space above/below?
Nope
It varies by font, by OS, by Browser, and probably lunar cycle as well. You can expect fonts to consistently be inconsistent.
Some fonts don't even have the concept of ascenders/descenders. What would you do if an icon font was used? Some fonts align descenders such that they don't even descend below the baseline. Others, such as calligraphic fonts tend to drop below the baseline, whether or not the character has an actual descender.
When I'm building pages off of comps that don't include font-size descriptions, I often have to render a large set of varying font-sizes of a particular family. I have a utility webpage that I use locally so that I can determine which font size must be used, and what font alignment will work.
Example:
This example uses Arial, and even Arial renders differently for some sizes between Chrome, Firefox and IE. When you're using sets of fonts you then also have to worry about all the other options in the set, in case the user doesn't have that font installed.
If you absolutely must have an exact rendering, you should be using an image to render the text. Use the [alt] attribute to reference the text in the image. It's not as manageable as text because it requires re-rendering every time a content change is desired, but it works well enough, especially for things like logos which absolutely must render in a specified manner.
Related
I was tasked to rewrite the html and css for a page from scratch, but reach the same visual result. I've found a very strange result while trying to match up letter-spacing on an element between the two pages. The old element is letter-spacing: 0, but to match letter-spacing, I had to set new element to letter-spacing: 0.015em.
Old
New
I don't have a proper image editing software handy to super impose them ontop of each other, but when swapping between tabs (on the same browser), it is clear that the first and last letters are in exactly the same place, with the same font, font-weight, and font-size. Both explicitly declared and computed as font-family: Arial, Helvetica, sans-serif.
Yet, the letter-spacing is different between on the on different letters. Look at the space between the e and the r at end of rubber. I've made all things equal in my inspect element, and the change persists. This is only for Chrome. Behavior is different in other browsers that are outside the scope of this question.
I don't really need to match it up, but I'm curious why this behavior exists. Quantum physics perhaps?
If you are ultimately unable to fix this bug (say it is browser related) and it is imperative that the letterspacing be spot on, you can always use a kerning library like LetteringJS to give you letter spacing control down to the individual letter. I used it on a couple projects and did not notice any significant performance hits (apply it only to elements you need finite control of the lettering on)
So I'm reading using pt as a screen font size is bad as it's an absolute measurement and can render differently, but mostly these are old articles.
I've tried outputting text in 18pt/12pt/9pt alongside 1.5em/1em/0.7em and using various browsers' built in zoom capabilities the output adjusts consistently and similarly for both.
Additionally, when I'm reading the WCAG2 guidelines everything it says about font sizing is based on pt (e.g. 18pt for large text).
I guess the question is as the title, is pt really such a bad idea, and why and where does it fall over outside of my simple test?
thanks.
Advice against pt and other physical units is still valid from the accessibility point of view. The reason is that different people need different font sizes, and physical units fight against that, in the digital medium where font sizes would otherwise be adjustable.
It is true that all modern browsers have zooming capabilities, which work around some of the problems caused by physical units. But zooming is different from changing font size.
You can see this by testing with a page that sets some font size in pt and contains an image, too. When you zoom, all dimensions get changed. But when you change font size, using the browser controls for the purpose, IE 11 still refuses to adjust a size set in pt units. And this is, maybe arguably, correct behavior. And generally, when people want increased font size, they want just that—not zooming. Everything should work as otherwise, just with a larger size set for text. This works well when you, as an author, don’t set font size at all. If you set font size in pt, it doesn’t.
Just like I have mentioned in the title.
How do you guys manage the fonts , when you do a web design
because different browsers even you set equal in pixel but the result seems to be different.
It makes other element collapse with the things I have designed.
so please advice me.
Eg: most browsers are okay , but IE is bad.The fonts appear to be very big than in others.
For main body text, you don't. Some people want bigger text so they can read it more easily; get in their way at your peril. Use relative font sizes in units such as ‘em’ or ‘%’.
For small amounts of presentational text where you need text size to match pixel-sized on-screen elements, use the ‘px’ unit. Don't use ‘pt’ - that only makes sense for printing, it'll resize more-or-less randomly when viewed on-screen.
You can still never get the text exactly the same size because fonts differ across platforms—and Lucida Grande and Helvetica look very different of course.
My website, for the most part, uses relative fonts and fluid layout techniques, so our site layout will scale based on what the browser's default font size is set to. But there are certain elements that have fixed widths, and our layout past a certain font size just doesn't work well or look good. It's not feasible at this point to go back and change all of those elements.
So, I want to allow the site to adjust based on the user's chosen default font size in the browser--within certain limits. For example, things start to look a bit wonky at a browser fontsize of 22px; I'd love to have the site be relative, up until it hits a maximum base size of 22px.
From what I can gather, there doesn't seem to be any easy way to specify this purely in CSS. I was thinking the best approach is to use Javascript to detect the base fontsize on page load, and if it's >22px then I'll set a style on my body tag to fix font-size to 22px. If it's less than 22px, I won't do anything (and leave our default relative style in place). I don't care as much about handling font size changes while the page is loaded, as that seems like an edge case (that would get corrected on next page load).
Is this the best approach, or are there better ways?
You cannot prevent users from increasing font size (even if you set the size in pixels, users can just Ctrl +), and many people think this is good – people may need larger font size than you expect, and breaking layout somewhat may be better than not being able to read at all. So what you can do is to make any reasonable effort to ensure that the page works reasonably for a wide range of font sizes.
I have some text on my website that I would like to make 'bold', and its font-size to be 'x-small'. But whenever I apply the font-size, the text loses its bold. When I remove the font-size, and the text goes back to default, it's bold again. What's going on here?
<span style="font-size:x-small; font-weight:bold;">TESTING</span
Have you tried other font families? If I remember correctly, Arial in small sizes looks the same in bold and normal weights. Give Verdana a shot.
the thing is that true type fonts DO render differently on various sizes.
If you have bitmap fonts, its just resampled to whatever size necessary.
TTF are based on vector graphics and can be scaled to any size needed.
However there are, depending on the font family, differences in how the font is rendered in different sizes.
Theese changes are intentionally and coded by in by the designer of the font.
Usually lines get thinner the smaller the font is rendered, this could cause the effect you are experiencing. You can try different fonts, but rest assuered that, unless you use certified standardized fonts, there is no guarantee of how they will be rendered.
Some font families will appear as normal when you shrink them.
Try using Type Tester to see exactly how your fonts look. It will use the web safe ones as well as what's on your machine if your using #font-face.
http://www.typetester.org/