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.
Related
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.
Is it okay to set the width and height of the img tag performance wise knowing that the original image is much smaller?
The articles I've read usually say that setting width and height solves the performance issues, but its not clear, if I set the width and height and they are different from the native image size, is it "ok"?
Or Do I have to always set the same width and height as the image itself?
Unless you're anticipating your site used on slow/limited devices like smartphones you shouldn't bother about performance in this specific case.
However, if you specify size that is larger than the actual image size then the image will look bad.
From my experience specifying an image size is useful to avoid page layout change when an image is not loaded immediately; in this case the browser initially doesn't know what the size will be and won't reserve the needed space for it. Later when the image is loaded the page contents may "jump" because the size of the image will change for the browser.
I don't have benchmarks at hand, but I think it won't be a problem at all if you set a width/height different than the original one. The browser renders the image, and that's it. The rendering action is usually not expensive in terms of performance AFAIK. By the way you are not supposed to be afraid of things like this, unless you are doing something very fancy (i.e. an image 99999x99999 or rendering 2,000 images in a single page).
Anyway, if you can avoid that, it's probably better.
In some browsers I'm testing I can't seem to be able to set the body font size to less than .583em. Is there a limit or has anyone run into this? It's on purpose as part of a design program of showing effects of small fonts.
Most browsers have a minimum font size, and will round any smaller text up to this minimum. The value of this minimum is usually user-configurable, and the defaults depend on the browser.
If the browser you're using has a minimum font size set, there is no way to override it. Sorry. You'll probably have to use an image instead.
CSS is not my forte so this might be something simple. I have set my footer font size in a stylesheet using 0.8em but on different pages it is a different size. I'm only editing someone elses work and he did a poor job at not closing tags so its a bit painful.
Is there a way to clear all font settings so that the footer is the same across all pages? Or is this a problem that can be solved some other way?
Cheers for any help.
I notice no one has touched on how em works as a font size unit, so I'll try to clear that up for you.
There are two ways to tell the browser how large your fonts should be rendered.
setting an absolute size
For absolute sizes, like px or pt, you're telling the browser exactly what size you want the text to be. If you write 12px, it's going to come out as exactly 12 pixels tall.
setting a relative size — em is a relative size.
For relative sizes, like em, you're telling the browser how big to make the text with respect to other text on the page. This works sort of like a percentage, so if your footer text is sized at 0.8em, it will be rendered 80% as tall as the main text on the page.
This explains why you're getting different sizes on different pages. If the font size of the body is set explicitly on one page, but not set at all on another (or set explicitly to a different size) that will make your em-sized fonts render at different sizes.
This is also why it's really bad to use <font> tags. It's going to be a serious pain to dig around those tags and figure out what explicit sizes are being set that might be throwing off your ems.
When you set your font sizes using CSS, this is not only an information which is easy to find, but also a property which is easy to modify.
As David Thomas says, the use of <font> is deprecated. If you have a software tool to do global edits, you might try deleting all the <font> tags and then add classes back to the HTML that actually needs to be different fonts and add the font info to the CSS.
The other option is to get through one at a time, which I imagine to be time consuming. At least you would have cleaner HTML when you were done.
In a weak defense, the previous designer may have used a WYSIWYG web design tool that created the HTML for him/her and didn't see the resulting code.
Try using an exact size with px or pt units rather than em.
Sizes in percent and em can get screwed up by unintended levels of inheritance but not px or pt.
My solution was basically to do inline styles to correct any problems. Using px rather than em was an option but we preferred to keep accessibility rather than best practice against using inline styles (any best practice was out the window anyway).