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.
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.
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 am working on some UI controls and wondering if I should use pt for the widths, heights, border sizes, margins, paddings, and font sizes? I want the controls to be scalable and look the same on every screen and projector.
Is there something else I should worry about when designing for scalable user interfaces? I am already using non-raster based graphics (colors and SVG).
No. pt's are fixed size. You should be using em's and/or ex's (maybe %'s) if you want scalability.
If you want scalable, then you don't want pt, which resolve to 1/72th of an inch (but only if the computer is correctly calibrated to know what DPI to use).
If something is sensible at 72pt (1 inch) for a screen that you sit right in front of, then it isn't going to be sensible when projected (still 1 inch tall) on a screen 10 feet away.
Yes, you can use pt or em. 12pt = 1em. This is the size that is adjusted when you choose a smaller or bigger font in your browser. Elements marked up with pt or em are sized along with the font (I think).
Modern browsers however (even the latest FireFox and IE), prefer to zoom the entire page instead of only the font, although it's still an option to zoom fonts only. In that case, it doesn't matter much whether you choose px or pt.
As has been mentioned, 1 point is 1/72 of an inch. The screen I'm using has 1200 pixels on a height of 20cm. If I project it, those 1200 pixels spread to 3 metres.
There are many measurements in the w3c CSS specification, many are used but few properly.
Your best bet is to use em's for layout which is related to the font in use. Percentages can also be used.
However, you'll need to 'nudge' some browser layouts by "a gnat's tadger", particularly when looking at buttons, dropdowns and text boxes. Often these are setting something to position relative to nudge it up/left/down/whatever. Typical examples are when IE and Firefox have slight differences.
It's quite ambitious to have your forms rendering "the same on all screens and projectors", implying different browsers all look the same.
On a website I made, one person sent me a screenshot which shows that my subtitle font is too large.
I've checked the site on two machines (Vista) with FF, IE6, IE7, IE8, Safari/win, opera/win.
I can increase the font size of the browser, but the subtitle stays the same size (since it is 8pt as shown below) which is what I want (so it doesn't extend under the logo).
It checks out fine on 34 browsers screenshots at http://browsershots.org.
What could be causing the font to be larger on this one person's machine (windows XP, IE7). He says "all other websites look fine". Is there something about Windows XP that enables the operating to change the font size in browsers, etc.? Or perhaps a problem with arial/italic on Windows XP?
Here is the CSS for it:
#subtitle {
position: absolute;
top: 78px;
left: 40px;
width: 738px;
text-align: right;
font-size: 8pt;
font-style: italic;
font-family: arial;
}
ANSWER:
I changed "8pt" to "10px" and it works now for him. I assume that he had changed the DPI on his machine.
You used ‘pt’ as a size unit. Don't do that. The CSS ‘physical units’ (pt, mm, in...) only make sense for physical output (ie. a print stylesheet).
On-screen, points are mapped to pixels using the system's ‘dpi’ setting, which can vary arbitrarily across machines. Macs/Windows/Linux all default differently, and can be reconfigured. Many Windows users increase the dpi setting in order to resize the fixed-point-size system dialog box (shell) font.
If you must use non-relative units for some text, the unit you want is ‘px’.
There are other reasons font sizes can change (eg. different font availability, minimum font size settings, deliberate font zooming), which is why you should never completely rely on them being what you expect, but this is almost certainly the cause in this case.
This is perhaps a stupid question, but has the user inadvertantly changed their browser's font size? In IE6 onwards, holding down CTRL and scrolling the mousewheel forwards/backwards will increase/decrease font sizes.
Three possibilities:
The user has changed their DPI settings for their machine. In some versions of Windows this manifests as changing fonts to "Large" or "Very Large";
The user has changed their default font in their browser (from, say, Tahoma/12 to Tahoma/16 in Firefox); or
The user has disabled CSS/HTML font sizing in their browser. This is an accessibility setting. Some people also use it for when they have, say, 1920x1200 resolution on a 15" laptop and some Web weenie has set font sizes on their Website to 8 pixels high.
Sorry, bobince and Diogenes, but I must disagree with you in the strongest way possible in regard to not using pt sizes and always using pixels:
A designer wanting a font size to be relative to the default size specified in browser or OS settings, which should be the standard, should use % or em. A designer wanting an absolute size (on screen) should use pt to keep the font size constant regardless of the screen's DPI setting, and here's why:
Modern laptops and mobile devices' screens have much denser pixels than desktops', up to approximately 150dpi of natural (default) resolution compared to the desktop's 72. Medical and other specialized screens go even higher. And the user has the ability (if not always the knowledge) to raise or lower the logical dpi to customize the display according to his preferences and sight ability.
Any image or text sized in pixels will be too small to read on a dense-dpi device, making your good-sighted users struggle and rendering any users with less than perfect sight unable to read the text. More importantly (and one can argue if this is correct behavior or not), some browsers do not resize pixel-sized text even when the user commands it, making the situation unfixable.
Unlike paper medium, where position to the precision of 100ths of an inch is possible and everyone reading a designer's work sees the same-sized paper, the diversity of devices used to access the Net invalidates the entire concept of pixel-perfect design, which looks good only on the one device it was targeted at. The point of the design on the Web is to make the site accessible to the target audience, which usually should be as large as possible and would be using a range of devices and settings.
Operating systems are already going there with vector UI elements or, at the least, large source bitmaps that are scaled smoothly. So should you, forgetting about the arbitrary unit of measure called "the pixel" and making your designs compatible with the widest array of access devices possible.
Addendum - to additional points raised by Diogenes
Unfortunately, the real-world situation with DPI awareness (and thus with proper support for pt-sized text) in currently popular operating systems is, for the lack of a stronger printable word, a clusterfail, as summarized by the CSS-Discuss Wiki:
Unfortunately, most computers don't know [the display's DPI], so the browsers don't either... In the absence of this knowledge, operating systems and browsers typically just make assumptions, and these assumptions are usually wrong.
So, while in theory points would be the best unit for fixed text, in practice using them today produces inconsistent results in many OS/browser/screen configurations. Thus designers often have to give up and revert to pixels to achieve fixed font sizes. Personally, I use percentages and ems, avoiding fixed sizes altogether.
The CSS-Discuss archives have a great summary of the font sizing issues, and numerous links to details and various approaches.
On IE7 there is a zoom level and a text size. The most likely scenario is that they've changed one of these settings inadvertently. Have them click the "Page" button and look at the "Zoom" and "Text Size" settings.
As 2 other answers have suggested, the DPI settings may be giving you trouble. I have found that mixing pt,ex,em with px sizing can be a real challenge once you consider DPI settings and different browser default fonts.
So now I just use px for font sizes. Most of the problems go away.
P.S. Don't force that single user back to the regular DPI. I willing to bet that they are older, need reading glasses and the new high res monitor they got was harder to read because the print was so small. Someone adjusted the DPI and now the fonts are the same size as the old monitor, so now they really do like the new monitor better. The problem now is some web pages are messed up. That's where you come in.
Another thing you might want to look at when changing monitors from a CRT to flat screen is the digital font smoothing setting. Fuzzy characters become sharper. Fortunately, This does not affect your web pages.
Addendum - to address point raised by MaxVT
MaxVT makes some excellent points in his answer. Context certainly matters.
My answer was a bit lazy and incomplete. The reason I use px is because of the inconsistency across browsers. To my way of thinking, specifying a point size should specify the physical size of the character to the user on the device he is using, but in practice it does not.
For example, suppose you font-family: cursive; font-size: 11pt
In most browsers under windows, this defaults to the much maligned MS-Comic font. IE7 decided to use some other default and that font seems smaller and less readable in the same point size. The same can be said of Arial vs. Verdana fonts. Specify the same point size, and your whole layout changes. Throw in DPI settings on setup and it is chaos.
The dots-per-inch (DPI) setting is a bit of an anachronism. Your monitor or phone has a fixed DPI. You can only change it if you get a new monitor or phone. Having a dialog box to change the DPI is there only because the device does not report to the operating system what the DPI is. It's an imperfect world.
So I leave you with this suggestion - use px for now to specify the font size, but only use it once. Make all other sizes relative to your base font.
Then, when you have to port everything over to the latest BlackBerry or iPod that does a better job of everything, switching from 11px to 11pt will be easy. And test out your software so it does look nice as you boost the font size.