I want to specify two different fonts in a font-family (font-family:A, B;) but the sizes of these two fonts are different.
It seems font-size-adjust onlys work in Firefox. So how can I adjust second font size if the first one is not available?
You cannot. The conclusion is that you should list only fonts that are sufficiently similar in their properties.
Well, there are some tricks used to detect the availability of a font on the basis of its properties. You could use font A (only) for an invisible inline test element containing some text and then compare, using JavaScript, the width of the test element with its measured width (allowing some small difference, since different implementations of font A may yield slightly different widths). If the widths don’t match, you would change the font size setting for the element(s) that have font-family: A, B, so that the size is suitable for B. Well, you would still have the problem that font B might not be available either. So it would be messy, with no real guarantee of success.
You are right, font-size-adjust isn't standard, and is hence won't work.
I think that the best way to solve your problem isn't to try and work around two completely different font sizes, but to select two fonts that are sufficiently similar as so the sizing is consistent.
Preferably, I would use Web Fonts (Also, http://www.google.com/fonts is a good place to start), so ensure that everyone gets the same experience, and you can load consistent, beautiful fonts across browsers and platforms. If the performance hit is a problem, then consider using reliable font stacks.
I understand that this isn't a strict answer to your question, but it may be a better way to go. :)
Related
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
What are the advantages & disadvantages of each? em, px, % and pt ?
My current choice are percentages, the only reason is because I can globally change the font-size of all elements, just by modifying the font size on the root element (body)
I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.
Can't recommend it enough : http://baselinecss.com/
My original design training said em's where possible.
I believe a main reason was that different browsers and devices have different resolutions, which is once again becoming a big issue.
I think it's frequently better to use em's and %'s as they are an abstraction layer particularly when compared to pixels. Both are similar in some respects as "100%" = "1em".
Another problem with the pixel unit is that it does not scale upward for visually-impaired readers.
Today, for mobile, pad, etc. consideration it's often better to have specific stylesheets / rules for each one.
Also, for print concerns, em works well.
I have seen em unit called a standard for font sizes on the web, but the percent unit often gives a more consistent and accessible display. When user settings are changed, percent text scales well preserving readability, accessibility, and visual design.
Here is a link to one of my favorite articles on proper sizing of text with css from AListApart:
http://www.alistapart.com/articles/howtosizetextincss
Semantically, em is preferred, but I've always found it problematic because it impacts each child element inclusively. If your design nests 4 or 5 divs and each is at .75 em, by the time you get to the last child div your text is almost unreadable.
My preference is pt because it works with various operating systems (allowing the system itself to decide what a pt is) rather than using px which can really put a pinch on the readability of a site depending on resolution. Em is considered the "standard" for css, but it has just as many problems as the others, but it does have the advantage of cascading globally.
I always use ems. Using % is kind of the same, but they mean something else when using them in a padding or margin statement (padding:1em 0; is not the same as padding:100% 0;). So just use ems I you mean relative to the current font size, and avoid any confusion.
Added benefit or using ems is you could e.g. use a media query and body{font-size: 120%} to give mobile users a slightly bigger fontsize.
Nice question !
Me i'm using pixel because I like it when everything is fixed.
But checkout this article :
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
could help you make a choice.
I think all this is very personal. Or it depend of what you are doing I suppose
I still use EM's in the CSS to specify the sizes of elements in my templates.
Today most browsers are able to correctly scale websites where the sizes are given in PX.
My argument for using EM's was / is: if a person that has a sight disability and changes the base font size in the browser, the design still fits.
I'm asking because for me its still a source of errors to use EM's. When i specify a different font-size then the base font-size on a element, I often forget to adapt my EM calculation for the children elements.
Now i have 2 questions:
How do people with a sight
disability configure the browser (do
they use the browser zoom or do they
still change the base font-size)?
Does it still make sense to use EM's
for element sizes nowadays?
Based on what I've read, neither. Users with mild-to-moderate sight difficulties often use applications distinct from the UA itself to provide zooming functions. These tools can magnify all or part of a display, but (in my limited experience) they don't zoom the text out-of-relation to the setting.
It still makes sense to use 'em'. First of all, accessibility isn't the only reason to use 'ems'. I think the inheritance model of relative sizes makes more sense with ems and percentages than it does with pixels. Second, you can do calculations in CSS3 itself, if it helps you to not need to remember to adapt your calculations.
refs:
http://www.championinternet.com/rwa/Ann.pdf
http://davidbcalhoun.com/2010/does-it-still-make-sense-to-use-em-rather-than-px
http://www.w3.org/TR/css3-values/#calc
Physical dimensions (px) are generally worse than logical (pt, em, %) because physical devices' size and resolution may vary wildly (from a small handset to a desktop screen to a wall-mounted plasma screen). Unless you're tightly bound to a piece of raster graphics, there should not be any disadvantage in specifying dimensions in logical units.
If you always specify font sizes as percent of base size, it's harder to forget to use the logical units :) Also a user can just specify base font size in the browser and your entire design adapts automatically.
When font size is too small for me to read, I zoom a little. Also I specify quite large base size for Japanese pages so that I can make out the glyphs. But if a page resists to adapt to font change, I usually just hit my 'Readability' bookmarklet, and the offending design disappears completely.
I'm still in favor of using EM as a unit. But like you said, modern browser scales size pretty well even with other units.
I think the most important is to always use the same unit across the website. As long as you don't start to mix different unit, the browser should handle everything well.
The only real advantage I see nowadays to use EM, is that someone who has increased is default font size will see your site with bigger elements without doing anything. If you use PX, the person probably have to change the size manually.
I have windows that are fixed in size, under which I have textual labels. Although I use the same font, the fonts look different on windows, mac and linux, up to the point where I can't rely on where a label will end, even though the string and the font size are a constant in my application.
Is there any solution to that? Someone mentioned embedding TTF fonts and using them, but is that really necessary?
There is no font you can rely on being available on all platforms, and height/width ratios for different strings will differ for different fonts (fixed-width being slightly better). Additionally, things like different DPI settings will cause you headaches even if using the same font. I would rather reconsider whether your widgets really should be fixed size and you need those assumptions about the font size at all. In almost all cases, your UI will be more usable, readable and consistent with the rest of the desktop if you use flexible layouts and stick to whatever font and font size the platform suggests.
You can use QFont::setPixelSize to guarantee a consistent font size across platforms.
Since the goal is to keep a line of text label from drawing over and out of the window bounds, one solution is to adjust the font size used at runtime.
QFontMetrics provides boundingRect() family of calls to find how must space a text string will take when drawing in a given font. With those, you can test if the string can fit in the space. If it doesn't fit, reduce the font size and test again.
When creating web pages how do we achieve a consistent font size across browsers. I have used something like "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" in my CSS, but the text looks different in Firefox, IE, Google Chrome and Safari (and this is not even on different platforms). Basically on the same machine, that is running Windows Vista, I get a different look and feel under different browsers.
How can this be fixed so that the size of text appears same on all the different browsers.
You will want to use a CSS Reset to attempt to get consistent behavior across all browsers.
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.
Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.
When creating web pages how do we achieve a consistent font size across browsers
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.
With these two settings, you can reach exact same font appearance:
font-size: 70%; // better than px
line-height: 110%; // required to make line heights the same
Tested: IE9, Firefox, Google Chrome
This is a non-answer, as there are ways to achieve what you need, but i'm not too well-versed in them. Start with the "reset" that frameworks like blueprint usually provide and go from there.
It is usually much easier and smarter to have designs be flexible enough so that the small differences across browsers don't play too big a role.