text:
Jon Corzine, former head of the failed investment firm MF Global, was subpoenaed to appear before the House Agriculture Committee on Dec. 8. Having run MF Global when a suspected $1.2 billion worth of customer funds – including accounts of many in the agriculture sector – went missing, Corzine walked into the hearing surely knowing he'd be roughed up.
Committee members ensured that expectation was realized. But Corzine – a former New Jersey governor and senator, whose former firm is now being investigated on multiple fronts -- invited more scorn with weaves and dodges in both his opening statement and answers to questions.
In prepared testimony, Corzine said his sadness over the firm's collapse was intense, although "of course, (it) pales in comparison to the losses and hardships that customers, employees and investors have suffered as a result of MF Global's bankruptcy. Their plight weighs on my mind every day – every hour. And, as the chief executive officer of MF Global at the time of its bankruptcy, I apologize to all those affected."
Even so, Corzine did not shoulder full blame and said trades at MF Global were done without his full participation. "Even when I was at MF Global, my involvement in the firm's clearing, settlement and payment mechanisms, and accounting was limited."
For the hearing's full slate of prepared testimonies, see here.
During his testimony, Corzine repeatedly used the word "stunned" to describe his Oct. 30 reaction to learning of "lost" customer funds. California Rep. Dennis Cardoza wanted to know Corzine's first action following that revelation.
Corzine: "The first thing was 'let's get the people to recheck the figures and make sure we've done everything we can to appropriately confirm" the lost funds. "There was still a hunt."
"I'd have gone to the restroom and thrown up, myself," retorted Cardoza.
Corzine tried to distance himself even more from MF Global's problems. While admitting to "overall responsibility for the firm" he "did not … generally involve myself in the mechanics of the clearing and settlement of trades, or in the movement of cash and collateral. Nor was I an expert on the complicated rules and regulations governing the various different operating businesses that comprised MF Global. I had little expertise or experience in those operational aspects of the business…
"I simply do not know where the money is, or why the accounts have not been reconciled to date. I do not know which accounts are unreconciled or whether the unreconciled accounts were or were not subject to the segregation rules."
Corzine also claimed reports that say MF Global's risks and leverage (in the range of 40-to-one) during the lead-up to collapse are incorrect. "One of the recurrent themes in the media has been that MF Global took on too much riskduring my tenure, in particular the amount of leverage that MF Global bore at the time of itsbankruptcy. In fact, MF Global reduced leverage. In the quarter ended March 31, 2010, MFGlobal's leverage was 37.3. During my tenure, it was consistently around 30."
Minnesota Rep. Collin Peterson, ranking member, smacked down Corzine's attempt to soft-peddle the amount of leverage MF Global carried. "Apparently, when you took over, the leverage was 37.5-to-1 and you got it down to 30. Somehow or another that's a good thing? This mentality on Wall Street I don't get."
Corzine allowed that a leverage of "30-to-1 was a lot higher than I'd want on a sustained basis." In the firm's last days, he said, if the hail-Mary to "seek a strategic partnership with the FCM (Futures Commission Merchant) … had been accomplished … it would have lowered our leverage to the mid-teens to high-teens."
What, when, how?
Did Corzine authorize a transfer of customer funds from segregated accounts?
Corzine: "I never intended to break any rules, whether segregation rules or any of the other (applicable) rules."
Oklahoma Rep. Frank Lucas, committee chairman, asked if Corzine is aware "of any transfers, authorized or unauthorized, of funds out of customer accounts?"
Corzine again tried to wiggle off the hook, claiming distance from any such occurrence. "I'm not in a position, given a number of transactions, to know anything specifically about the movement of any specific funds. And I will repeat: I certainly would never intend to direct or have segregated funds moved."
As for how he could have unintentionally encouraged the comingling of customer and firm funds, Corzine provided weak tea. "Someone could misinterpret 'we've got to fix this' – which I said the evening of Oct. 30" when he first learned of the "lost" funds.
What role did Corzine personally play in monitoring the segregation of MF Global's customer funds?
"My role was primarily to bring assurance to myself on an ongoing operating basis that we had the people, policies and procedures in place to maintain that segregation," said Corzine. "At least until those last few chaotic days, I felt comfortable we'd adhered to (that)."
Illinois Rep. Timothy Johnson then brought up Corzine's "substantial wealth" and asked on behalf of his farming constituents, if Corzine and other MF Global executives are "willing to stand the loss with your personal fortunes and (ensure customers are) made whole?"
Corzine – worth hundreds of millions of dollars -- stammered and Johnson pounced "it's either 'yes' or 'no.' It's fairly simple."
Corzine: "I don't think this will go unresolved."
"Assuming it does go unresolved – and it appears there's a lot falling through the cracks – are you willing to commit … your personal fortunes to making these people whole?" repeated Johnson.
Unsurprisingly, Corzine made no such commitment.
Johnson then jumped on CFTC head Gary Gensler's recusal from the MF Global investigation due to the "whole Goldman Sachs fraternity." Gensler and Corzine once worked together at Goldman Sachs, whose former employees also "encompass … foreign ministers of several countries in Europe" that MF Global invested in.
If Gensler's recusal was appropriate in recent days, wondered Johnson, "why didn't it happen a year ago? Given your relationship and the CFTC's oversight of your company why wasn't recusal … pursued a lot earlier in the process?"
Corzine, who eschewed any opportunity for "speculation" throughout the hearing, again applied the tactic. "I think you'd expect I wouldn't speculate about the internal considerations Gensler or the people at the CFTC took."
Prior to Corzine's grilling, the committee heard from several of those tasked with regulating the U.S. financial industries. Many were unhappy with Gary Gensler's absence and aforementioned "non participation" in the MF Global investigation. While he traveled abroad, Gensler left it to CFTC member Jill Sommers to answer questions.
"I find it very unacceptable that Gensler is not here, that's he's recused himself, that he's gone out of the country at the same time we're faced with the eighth-largest bankruptcy in the history of the United States on a firm under his oversight, where $1.2 billion of our constituents' money is missing," said Georgia Rep. David Scott. Scott then brought up Gensler's "very close personal relationship with Mr. Corzine, from when they both worked at Goldman Sachs. … It raises a great deal of suspicions."
Further complicating matters, pointed out Connecticut Rep. Joe Courtney, was that Gensler's decision to recuse himself "was in response to a member of the Senate who demanded he recuse himself because of allegations there was some relationship with MF Global. You can get whiplash around this place sometimes trying to keep up with competing finger-pointing going on."
Courtney's admonition was ignored immediately.
Echoing concerns expressed in a Dec. 1 hearing by the Senate Agriculture Committee (see here), Indiana Rep. Marlin Stutzman laid into Gensler saying "for us to get the facts to everything that has happened here, every player should be willing to step forward and share … what they know and when they knew it. … In this situation, I believe Mr. Gensler should be here, as well. … I believe (Gensler's international travel) today is no coincidence."
Rule 1.25
Scott said the "core of this entire investigation and the resolution of the investigation rests with the application of CFTC Rule 1.25. In that rule it clearly states you can't comingle customers' with business' accounts."
Sommers agreed but pointed out Rule 1.25 "only governs customer segregated money on the FCM side." The rule doesn't prohibit "a BD (broker dealer) from making investments out of their house account in foreign sovereign debt." The rule removes "foreign sovereign as a permissible investment but allows FCMs to petition us for exemptions."
Following a heap of questions from seemingly bewildered committee members, Peterson tried to make the regulatory set-up less confusing. "As I understand it, MF Global was an FCM for years. They charged commissions to do these trades. They had segregated money and made (more) on that.
"This business has become increasingly competitive to the point where (none of the firms) can make money on the commissions they charge to do these trades. The way they're making money is by investing customers (funds).
"As I understand it, one of the reasons they wanted to liberalize that is to make more money. But when they invest this money – when they put it in sovereign debt – they have to be treasury bonds into that fund to cover it so that the customer isn't at risk.
"What happened with the FCM is they were losing money so Corzine came in and made them a broker dealer (BD). Well, the broker dealers aren't regulated by CFTC but the SEC (Securities and Exchange Commission).
"So, that's where the confusion is coming in. They got into the broker dealer business, began investing in sovereign debt, doing the repos and adding to their risk, leveraged themselves up somewhere between 30 and 37.5 times.
"Then, this thing moved against them and they had to come up with margins. When they couldn't come up with the margins, the firm collapsed.
"So, there are two different things. Commissioner Sommers is trying to tell you that the CFTC doesn't regulate the broker dealer side of this. … You need to split this between what the CFTC can do and what they can't."
Watch list?
California Rep. Jim Costa was concerned with other investment firms that may be on shaky footing. "Do you have any idea … if there are other potential bankruptcies out there like (MF Global)? Do you have a watch list? Do you have any idea -- under the fragile nature of the economic recovery we're dealing with on a global basis -- if there are (potential bankruptcies) out there? Would you know if there were?"
Sommers said the CFTC has the ability "to see the futures side of the business. What we're looking at on a daily basis are the investments of an FCM, both in their customer and if there are house or proprietary investments of the firms."
Costa: "Okay, that's the process. Do you have a watch list?
Sommers: "I'm sure there are firms that are close to the margins."
Costa interrupted, "let me ask it this way: is there any concern among you and your colleagues that there may be others out there? We have farmers and ranchers and dairymen – my focus -- … and I don't want to see the futures markets destroyed or confidence in them tremendously eroded. Again, can you actually perform the duties of a regulator or watchdog?"
"Absolutely," replied Sommers. "In certain economic…"
An exasperated Costa again cut her off. "But you don't even know if there's a list."
More than once committee members tied MF Global's actions to the degrading of Americans' trust in financial institutions and political leadership. And there was an underlying uneasiness and realization by the legislators that, perhaps, the underlying problems can't be fully dealt with through the passage of new regulations.
Nebraska Rep. Jeff Fortenberry picked up the torch: "The problem is we can't pass enough laws fast enough, create enough regulatory entities quick enough, if there is a collapse of the types of values that lead to responsibility and commitment to the common good. We simply can't do it."
Addressing Corzine, Wisconsin Rep. Reid Ribble had similar concerns, first bringing up the multiple agencies tasked with financial institution oversight. "Can we regulate greed, incompetence and fraud out of existence? At the end of the day, sir, we have to make a decision of how going forward we can help protect consumers and investors from having another MF Global happen.
"My fear is we'll do what government always does: make up more rules and send more regulators. Then, in a year from now, we'll have another example (like MF Global). I'm wondering what the real solution is. I'm trying to figure out if … no matter what we do on this side of the dais, it still will happen."
There was a lengthy pause before Corzine answered. His answer -- while acknowledging "complex, multiple" regulators -- was hardly comforting. "Whether it is for those reasons or poor judgment or bad judgment, mistakes will continue to happen in the course of human events."


text:
Request a Speaker
|Caltrans District 5 is pleased to provide speakers to speak to your group, organization, association or industry about transportation in California, from highways to bikeways, traffic and pedestrian safety, and more. Please complete the form below to request a speaker.
Speaker Request Form
For questions or comments, e-mail us at Public Affairs District 5
Last updated: May 24, 2012

subset: commoncrawl


text:
Black Cherry Jam 16 oz.
The first ingredient in jam is always sugar. Ours are no different. Sugar and fruit, thickened, and sometimes lemon juice are what make toast in the morning a favorite. Bagels and English muffins go well too. For you, who for one reason or another do not want sucrose (sugar) in their diet, we have natural juice sweetened jams. You will never find us selling artificially sweetened products regardless of what claims are made.
- Item #: Black Cherry Jam


text:
Donny Kurniawan needed a new button or icon design and created a contest on 99designs.
A winner was selected from 179 designs submitted by 52 freelance designers.
I'm an independent iPhone developer. I'm developing a to-do app that syncs with the Simplenote web app.
General audience that likes simplicity and appreciates good design.
We need an app icon that is simple and looks good. The app design characteristics: simple, minimalist, "Helvetica-ish", "Swiss-y". The colours of the icon can be any of the following: grey, black, red, or white. The background colour of the icon is either red or white.
If it's possible, please don't use a checkmark symbol (it's a bit overused for to-do apps). But, if it's not possible, I'm okay with it.
I like something simple like the TeuxDeux icon: http://teuxdeux.com/
The various dimensions of the file will be this:
57 x 57 pixels
114 x 114 pixels
512 x 512 pixels
29 x 29 pixels
58 x 58 pixels
They all must be squares and in PNG format.
In addition, please also send one vector PDF image file (512 x 512 pixels).
Attached are the screenshot files of the actual app.


text: At 10:59 AM 12/4/2006, Robert G. Brown wrote: >On Mon, 4 Dec 2006, Jim Lux wrote: > >>Processors are a high dollar item for something quite compact, >>they're sort of commodity (at least as far as the end user is >>concerned), so they're ripe for all the fiddles that have been used >>on such items for millenia. Hey, didn't Archimedes get famous for >>devising some sort of test along those lines? > >Eureka! So he did! > >Are you suggesting that he take his processors into the bath with him so >they can talk to his rubber duckies:-) No.. you have that confused with the liquid cooling thread. >or that he run naked through the >streets in front of the main AMD office in protest? I suppose so.. I hadn't thought about that aspect of Archimedes's "work". I was more thinking of the detection of fraudulent jewelry. >The latter would probably work better than the former at least if >>I<< >were doing the running. Any toplevel AMD exec would do anything to >crank up quality control rather than have to endure the sight of an old >fat bald guy running around naked out front screaming about defective >processors...;-) They're in Silcon Valley in Northern California, aren't they. While it might not be as "counter culture" as downtown San Francisco a few miles away, or as mellow as Marin county a few miles farther north or Santa Cruz to the west, you might not get as much attention as you might think. They might just think that you're just another one of those eccentric cluster monkeys (the "naked ape" revisited).. At least the weather is usually temperate enough that you wouldn't die instantly of hypothermia or sun stroke. James Lux, P.E. Spacecraft Radio Frequency Subsystems Group Flight Communications Systems Section Jet Propulsion Laboratory, Mail Stop 161-213 4800 Oak Grove Drive Pasadena CA 91109 tel: (818)354-2075 fax: (818)393-6875


text:
Yellowstone Implementing Trail Closures and Fire Restrictions [AUDIO]
Continued dry conditions and a potential for increased fire activity have prompted Yellowstone officials to implement fire restrictions and close some hiking trails. Doug Randall has the story. A national racing adventure company is working with the state to stage and annual race centered in Casper. Click past the jump to listen to Wyoming Radio News.


text:
Comments on How to Size Text in CSS
96 Reader CommentsBack to the Article
Aren't the problems with em sizes on IE6 and IE7 caused by the fact that an em is a bit smaller on those browsers? .9759 times the size of a "regular" measure, if I'm not mistaken.
I've always followed the 62.5% method - setting your body to have a font size of 62.5% means that any browser where the user hasn't deliberately* changed their default font settings will set 1em equal to 10px. This means subsequent calculations are much easier and you can increase/decrease not only your text sizes but your entire grid, depending on how large/small the text is.
For an example, see the top few rules of "this CSS file":http://www.beseku.com/includes/css/screen/core.css to see font sizes being easily calculated.
* Sorry, the asterisk above was because if a user has set their font-size to be something different, I don't want to be 'that guy' - the one who changes it, (see also, resizing browser windows).
For those that want to use constant line height, your article will be useful; and those that don't can ignore that part of it. However, although you cite others for regarding this as good typography , I gather that you embrace the concept yourself. This certainly isn't the accepted wisdom for print, and it is ironic that the ALA page on which your article appears doesn't go along with this either. I don't accept every aspect of the ALA style (block paragraphs are my own special hate), but the smaller leading for items in the sidebars just seems to work. The converse I do not find to be true. I'm all for grids and rhythm on a page, but I think fixed leading irrespective of type size is out of tune.
I'd like to echo Ben's comment above; the 62.5% method is surely one of the most widely used em-sizing techniques but doesn't get any coverage in this article.
Personally I set my font-size:62.5% on the <html> element, leaving my <body> free to set a sensible em size to cascade down.
Wouldn't this then cause anyone with a different browser default(I use 14px) to be shown text that is clearly not the same size as the designer intended them to see? If you apply the 62.5% method to my browser, you would then be presenting me with 8px text.
Should you really force some of your users to resize the text before they can read anything on your site?
I too have been using the 62.5% method ever since I picked it up from some "WordPress":http://www.wordpress.com themes I was looking at. It has worked well for me, but I am going to try this method in my newest site I am about to start work on. I really appreciate the time the author took to make screen shots to show the comparisons.
Now… if only our clients understood how hard it is to get the fonts sizes consistent in all browsers… :)
I'm pissed as anyone else that you did not mention the 62.5% rule. I was like.. 'who is this amateur?'. But then I see the link to Clagnut. "You are the person the internet has to thank for the 62.5% rule!":http://clagnut.com/blog/348/ ! Well thank you.
I would, however, like to have seen some review of the techniques that CSS frameworks like YUI, Blueprint, and Tripoli use.
Thanks, @Paul Irish. Exactly.
Mr Rutter is the author who introduced the 62.5% rule many of us are already using. And now he is introducing a new best practice, based on experimentation shown in the article, and a desire to control the vertical grid as well as the font size.
Perhaps readers will forgive this innovator for continuing to innovate on our behalf, and will now actually consider what he has to say in the article, instead of criticizing him for not sticking with the rule he himself gave us.
A good, robust way of writing cross browser font-size CSS is something "we've":http://www.tictocfamily.com/ been discussing at work recently.
We had previously been using the 62.5% technique and were fairly happy with it until reading about the associated issues with users who had changed the default text-size of their browser (incidentally, it was while exploring the rather useful "Blueprint":http://code.google.com/p/blueprintcss/ framework that I read this).
One of the team here had suggested using pixel sizes for all but IE6, which would be given it's own, percentage-based, styles but that just seemed like too much work for my liking (maintenance would also be made more difficult).
As much as using em's can be a pain while dealing with nested elements, at least we now have a proven solution that would appear to cover all bases.
Thanks to the author for sharing. :)
@Cameron: Using pixel sizes for all but IE6 is something we've done at Happy Cog more than once (see Daniel Mall "here":http://www.danielmall.com/archives/2007/02/07/the_agency_formerly_and_currently_known_as_happy_cog.php for instance).
I've been using the keyword method advocated by Dan Cederholm in Bulletproof Web Design where you set the font size with a keyword and then adjust by percentages off of the keyword. Has worked very well for me and was curious why no mention of it here.
I think the combination of techniques here is brilliant, and will make a great foundation for universal typesetting best practices on the Web. I still can't help thinking that it's a ridiculous state of things that one browser dictates so much complexity (however elegantly executed) to achieve such a basic technique. But if we worked around the box model for this long, I think we can handle this until IE6 goes to that single-digit percentile in the sky.
Another article about how to work around IE's shortcomings.
Every other browser on Earth can enlarge or reduce text that is set in pixels. I will continue to specify my fonts in pixels, and if anyone wants to resize it, then they can zoom the whole page or download a more capable browser. Most of the people who are still using IE are the same sort of people who will never even click on their menu bar to see that there are text resizing controls, so it is a waste of my time to use complicated workarounds to accommodate the small minority who expect to resize text in IE. It is Microsoft's choice to not let my text be resizable, not mine. If people accept IE as their browser, then they are accepting that decision and should live with it.
On the issue of "vertical rhythm" as being good typography: its a bunch of BS. Somebody made that up a year or so ago, but it is certainly not accepted as good typography. In fact, the space between paragraphs should be less than a full line, as that IS accepted as good typography.
"Math' is non-countable. There is no plural of "math".
@Brad Kemper: The idea of vertical rhythm is much older than one year. Where is it said that paragraphs should have less than a full line between them?
@Brad Kemper: Jason is right, vertical rhythm is as old as dirt. To reiterate, the author's goal here is to "reconcile the designer's requirement for accuracy with the user's need to resize text on demand, arriving at a best practice that satisfies designers and users."
I'd like to thank you for putting so much time and effort into this article. The screenshots were especially useful, and I'm sure they were quite time-consuming to create.
Many of the previous comments make good points (I'm not sure I agree with the one-size-fits-all line spacing technique, either) but I certainly welcome the dialog and any new insights into handling typography in this clunky thing we call a web browser.
@Brad Kemper: "Math" and "Maths" are both correct, as they are both colloquialisms for "Mathematics". "Maths" is the form more commonly used in non-American english speaking countries. Richard Rutter is from the UK, hence, "maths".
Like Derek, I'm also curious why there is no mention of the keyword method. It provides consistent, resizable text, and at the time of this writing, it has been tested in a wider array of browsers and platforms than the method suggested in this article. See the Yahoo! UI Library for a detailed description: http://developer.yahoo.com/yui/fonts/
Thanks for this. I have been looking for a good introduction to the best way of using em's for a while now. I am now ready to go an apply these techniques to my websites.
Thanks again,
@derek allard and @Michael Christopherson
The "keyword method":http://www.alistapart.com/articles/sizematters/ was actually introduced by Todd Fahrner in A List Apart in May 2001. Mr Rutter *does* refer to that method (and that article) in his article. The problem with keywords, he says, is that they are imprecise—by which he means, different browsers interpret them differently.
Thanks for drawing attention to this issue. As one with imperfect vision, I have my browser set to 24 points default. I constantly run into problems where text is poured into boxes that are sized in pixels, and it just does not fit. Go to slate.com and hit CTRL + several times (in Firefox) to see what I mean.
Even worse are sites that open up text in a fixed size popup window, with the Submit button at the bottom and no scroll bar. It might work at the default font size, but not with anything bigger.
Thanks for drawing attention to this issue. As one with imperfect vision, I have my browser set to 24 points default. I constantly run into problems where text is poured into boxes that are sized in pixels, and it just does not fit. Go to slate.com and hit CTRL + several times (in Firefox) to see what I mean.
Even worse are sites that open up text in a fixed size popup window, with the Submit button at the bottom and no scroll bar. It might work at the default font size, but not with anything bigger.
The point about setting line-height with units to keep it consistent is very interesting and useful; but I can't believe we're _still_ seeing people advocate setting a default text size less than 100%. The reason browsers have such a large default text size in the first place is to compensate for clueless web designers scaling down the text; carry on scaling down the text, and the browsers will just keep increasing the text size so that people can actually read the damn page.
The number one complaint I hear about web pages, by quite some distance, is that the text is too small. It's nice that you put in some effort to allow people to scale the text if they need to; why not just leave the text at the user's default size? If the user really hates 16px text, they can find out how to change it but, I suspect, most users are much less bothered by text that's bigger than needed, than by text that's unreadably small.
Please forgive a beginner if this question is off-base, but I was wondering why percentages can't be used? Once the body is set to 100%, why can't all other font-size declarations use percentages? Aren't ems just relative to the parent element anyway?
And, on a somewhat related note, is the use of points necessary for print style sheets? Or does the author's method print as consistently as it displays without a separate font-size declaration?
Sorry for the confusion. The method I'm referring to, which I inappropriately called The Keyword Method, is a bit different than Todd Fahrner's original method. I'm not sure if it has a name, but it involves a combination of keywords and percentages to achieve consistency across browsers. "Yahoo!'s version":http://developer.yahoo.com/yui/fonts/ of it contains a nice pixels-to-percentages conversion chart.
The idea of *pixel perfect* vertical rhythm is *not* what the *vertical rhythm* is about. And it is the same with font sizes—as monitors have more (and different) number of pixels per inch (especially on laptops) it becomes unnecessary to have equal and pixel perfect font sizes among all browsers, displays, monitors and devices.
Vertical rhythm is about *contrast*, points of *reference* and *flow* of the elements. There are many layout "examples":http://bjorkoy.com/blueprint/sample.html where "text doesn't":http://clagnut.com/blog/348/ look harmonic (or could be improved) although their heading and text spacing follows certain logic of math.
Web designers should forget about the absolute values and start to think in relative terms (which makes the web design different from the print). Design and composition in general is about the _harmony_ and _relationship_ of different elements of information.
Therefore, it would be very useful to look at the text sizing from the perspective where element weight, line spacing and margins are more important than the ability to convert between pixels, ems and percentages.
I have made a collection of "Konstruktors CSS snippets":http://konstruktors.com which include styles for basic typography and fluid grid/column based layouts. The typography part is based mainly on visually sound element contrasts—"view an example":http://konstruktors.com/WordPressTheme/SansserifRacer . Another good example is "Tripoli":http://monc.se/tripoli/examples/sample_f.html
At the same time there is no such thing as the perfect font, heading or line-height size. The designer has to decide with her own set of reasoning, which might even be unknown to the regular "viewer". And this is exactly why design is so interesting and exciting.
Personally, my impression is that text sizing in CSS is a bit of a mess.
Sizing in ems seems silly, because ems are a measure of horizontal distance, not vertical distance, and for different fonts the horizontal-to-vertical ratio can vary.
Pixel sizing might make sense when trying to match text size to a fixed-size image, but really nowhere else.
Ideally, I think we'd all size our text in points, then any browser at default font size would take screen resolution into consideration and display the text perfectly just as it would appear on paper at the same point size.
(reply to comment 30).
That is where the 'ex' would be very useful. Sadly, implementations differ quite a bit.
WebKit (Safari) and Gecko do one thing (the most correct one: the ex is based on the x-height of the specified font) where as Opera and Trident (iExploder) do it more simple: 1em = 2ex.
Strictly speaking, neither are wrong (are allowed by the spec). The Gecko/WebKit method is more precise and sensible.
Scaling based on the default size to get accurate pixel results seems a strange concept me. If you need pixel-precision then px units seem the natural choice. Whilst it may have been a good compromise to use ems or percentages five years ago due to IE6's dominance, IE7's page zoom allows pixel-sized text to be resized whilst keeping it in proportion with image sizes, and other browsers employ a range of other text-resizing methods that are not affected by px units. Firefox for example, lets the user set a minimum-font size.
The other problem is if a user has changed their default size to something other than 16px — which is something I would like to change to 14px so that I can more easily read websites that have not set a size — then, as encountered with Safari's default size for monospace, all bets on your pixel accuracy are off.
Also, isn't it a little rude to be effectively saying "I don't know what your default text size is, but I want it smaller than what you have chosen!"?
bq. Perhaps readers will forgive this innovator for continuing to innovate on our behalf, and will now actually consider what he has to say in the article, instead of criticizing him for not sticking with the rule he himself gave us.
Hang on there ... The article specifically states that the methods proposed lead to difficult calculations when using EM sizing throughout a site. So if, in the forum that you are promoting, a commentator states that they prefer the original methods because of such a problem, and doesn't see the benefits, they get sarcastic responses?
Without trying to provoke massive argument or come across as a dick, and fully admitting that I had no idea who came up with the original 62.5% idea, (if such a thing can be credited to one person), what the hell is the point of allowing people to post and discuss the merits of different techniques?
This sort of inventiveness and creativity should be put to a higher purpose than moving around letters around a page.
It's been fifteen years, at least, since WYSIWYG was introduced to the masses for desktop publishing et cetera. That web techs should be fussing over tenths of a percent in a declarative page description language is just so 1970's. Shades of Troff, indeed.
In any case, writing CSS as plain text is error prone, and error messages are usually nonexistent. We should be using property sheets for defining styles.
The techniques for producing consistent, multi-browser text sizing should only need to be known by those few programmers building WYSIWYG web writing systems.
Well I actually enjoyed the article. Thanks for the great screenshots and valuable information for cross-browser differences.
I use ems for font-size and have to admit that I have not used the 62.5% technique before. So I'm now off to have a play with that…..
None of this addresses the fact that *your* text on ALA is too small!
Body text should _never_ be rendered outside the range 90% to 110% (or 0.9em to 1.1em, if you prefer). If you find that, on your computer, it appears too large, then you should change the settings on your computer.
I have my computer set to display the text at the size I want. Your 0.8125em is too small, so I have to enlarge it to make it legible - this is _not_ good practice!
@Stephen Down: What's too small for some is just right for others. We don't aim to please everyone (and we'd be silly to attempt it). Changing the text sizes on our computers doesn't make much sense. We need to keep our setups at the defaults so that we can approximate a baseline for testing.
We're trying to make it comfortable for as many people as we can. We're sorry if you fall outside of that, but that doesn't mean our practices are bad. The fact that you _can_ resize it _is_ good practice.
On the setup I use everyday, there IS a difference in font sizes between Mac and PC when they are both set to the defaults. On my PC, which sits right next to my Mac, the fonts are bigger than they are on my Mac. So I do not get that the fonts are the same size. Does anyone else experience this or am I the only one?
In addition, I would also like to know why you can't use percentages to solve this problem. It seems to work for me.
I did like the article though.
@Brad Kemper:
bq. Every other browser on Earth can enlarge or reduce text that is set in pixels. I will continue to specify my fonts in pixels, and if anyone wants to resize it, then they can zoom the whole page or download a more capable browser.
I'm usually one of the first on the IE-bashing bandwagon, but I think it's wrong to do that here. IE _are_ following the specification by not resizing text specified in pixels, and other browsers are _wrong_ to do so. Pixels are for when you absolutely need the text to display at a particular size, and browsers should respect that. Text that can be resized should be set in ems, percentages or keywords.
But regardless of the rights and wrongs of it, you're showing a very negative and unhelpful attitude. The vast majority of people using the internet, and particularly those in the 90% of people who use IE, don't care about web design, they don't care about web standards, all they want is to be able to browse websites. If you are deliberately stopping people from resizing body text by using px measurements then you're just as bad as the people who omit alt text and who use Javascript popup links "because anyone who can't cope with that doesn't deserve to use my website", or whatever crappy justification they come up with.
As web designers, we have a responsibility to clients - to design a website that serves their organisation's needs - a responsibility to the general public - to design a website that allows them to access the content and services therein and that is easy and pleasing to use - and a responsibility to the web design community - to promote and use best practice, to continually raise the bar, deliver the best we can, and encourage others to do the same.
There's no place in there for having a tantrum about people using unsatisfactory browsers.
About the monospace 'problem' - Safari and Firefox both keep monospaced fonts at 13px. Safari 3 on OS X does as well. I'm not 100% sure about 3a mentioned in the article, but I believe it used 13px as well.
If like me, you don't want to revert to pixel-sizes to bypass this, "here is my solution":http://dusan.fora.si/blog/normalize-monospaced-text-font-size to the problem. But it does use some css hacks and might not be future proof.
@Voyou Desoeuvre:
bq. The point about setting line-height with units to keep it consistent is very interesting and useful; but I can't believe we're still seeing people advocate setting a default text size less than 100%. The reason browsers have such a large default text size in the first place is to compensate for clueless web designers scaling down the text; carry on scaling down the text, and the browsers will just keep increasing the text size so that people can actually read the damn page.
It's nice to know I'm not the only one banging on about this! Jason, I see what you're saying, but I still fundamentally disagree. I have the text on my computer at the size I find most comfortable to read. On Opera, ALA appears fine, if a little on the small side. On IE6, it is completely illegible.
Yes, it's good that I can change the size - but that's not good practice, it's simply working around bad practice.
Browser chrome is there for a purpose. The settings to allow people to set a preferred font size are there for a purpose. Once someone has set their preferred font size, all websites should then be legible without having to further fiddle with things.
The main problem, as far as I can see, is that by using ems, you stuff things up for IE users who have their text set to anything other than 'medium'. I might be wrong about the cause of this, but I think it's a bug in the way IE treats ems at non-medium text size.
eg, on another site, if I resize from 'medium' to 'smaller', the text reduces by about 25%, and retains a sensible size ... but if I resize from 'medium' to 'smaller' on ALA, the text size *halves*, which is why it becomes illegibly small. Other changes result in similarly dramatic changes - at 'largest', I only get about 12 lines of text on the screen.
When using only EMs, IE creates a new baseline for the text and enlarges and reduces from said baseline (instead of the original baseline dictated by the browser's default size). It is because of this anomaly that the text is reduced and enlarged beyond what would be considered normal, and what is offered by other browsers.
In other words, if "Larger" is 150% of a 1em baseline, "Largest" will end up being 200% of the new 150% baseline, instead of being 200% of the real 1em baseline. This, of course, makes the enlarged text abnormally large. And the same works in reverse for text reduction.
This is a bug, but one that's easy to get around. The rule: Never start sizing text in EMs in the style sheet (even if you want to use EMs). Always start with percent, as in 100% (instead of 1em). Doing this normalizes this baseline font size bug in IE and allows developers to use EMs anywhere else in the CSS file. So something like this is the cure:
body {
font-size : 100%; /* Set a cross-browser baseline in % */
#wrapper {
font-size : 0.9em; /* Then size the text as you want */
Hopefully what I just posted can be fixed to look as it should.
Just a couple thoughts…
I am both a web and print designer and I like to believe I know a fair bit about typography. Why web designers/developers have become obsessed with everything being set to a rigid baseline grid is beyond me. Where did you get this from? If you know anything about print you know that you don't set all text to the same baseline grid—it looks like crap. It's bad practice. It doesn't make sense.
I also don't understand why everyone is so obsessed with having such control over the size of text. Aren't we supposed to be over this already? I agree fully with those that have said that body copy should appear at the user's default size setting. End of story. That's the point isn't it? I'm 32 and I find the text on this site a little small. God knows what I'll think of it when I'm 52. Why are we trying to figure out better ways of telling users what we think they want?
When I design for print I take total control. When I design for web I hand over some control to the user. I'm happy with that.
I came across this "pt" measure, that is supposed to resemble true size (postscript points), so very common things like 9pt/12pt could be done in that very way. I have been using this pt method for a while; By the way, I find "ems" making a lot more sense than pixels, meaning I find them more of a natural measure for type than pixels. Eventhough I feel uncomfortable having to write uncomprensuble things like: 0.873em.
anyway, I've seen that Pts do rezise. So I have been using them happily
The main reason for not using pt for screen work is that points are defined as a physical measurement of 1/72 inch. How that is displayed on screen is a matter of luck rather than judgement - Windows and Mac render pt very differently.
Yes, by all means use pt in your print.css, that's what they do well. But they don't belong on screen - that's why we have percentages, ems, keywords and pixels.
Try to set (for example in Windows) different DPI in screen settings, you will get sometimes unusable design with your default CSS using EM's units. The problem appears on small LCD's with high resolution (mostly small notebooks). I think, the best is to let user to choose appropriate size of text (by choosing from predefined CSS styles).
But in a perfect world, where the operating system could detect display's dpi and set its own dpi accordingly, pt would make a lot of sense. Such as it is nowadays, most users don't really know what dpi means and even a smaller percentage have actually ever tweaked this setting.
BTW - There used to be a dpi setting in Firefox that let you determine your display's dpi. But I can't find it anymore, have they removed it?
Ok, now we have Arial pretty much covered—but it's a pretty ugly and bland font—especially when you see it practically *everywhere* today.
What I would like to see next is a technique to make the font sizes consistent on different systems when you use a list of fonts, because you expect that different users have different fonts installed.
For example, this simple style:
font-family: Techno, Impact, Haettenschweiler, sans-serif;
will render at completely different sizes depending not only on the user's DPI setting, browser's default font size and zoom level and system's hinting settings, but also on which of the fonts are available, what arcane rules the browser in question uses to select a font from the list, where the font files came from and the phase of the moon.
It would be really awesome if someone found a way to deal with it. Of course, embeddable fonts would solve this easily—but they are only in one rendering system, and not even a web browser.
Good to see someone hacking out hard comparison data.
Confirms what I've found on my own - font rendering is now remarkably consistent from browser to browser.
A one-whitespace-fits-all line-height (leading) regardless of font size flies in the face of readability studies measuring both speed and user-preference. Disregard.
Line length is an issue much worth thinking about.
Plus tightening the word-space property. (Any data there?)
And, very occasionally, letter-spacing.
Lastly, how about the ability to intelligently justify text, hyphenation and all?
Let's go for it! Solid work, this.
This is a great article, thank you! I have been feeling the need for an update on Owen Briggs work, and it is fantastic someone has done that work for us.
With an old PC screen sitting beside my clean, high resolution mac-connected-monitor, the size differences in IE have been irritating me for a while. The old monitor seems to have large pixels, so that everything looks clunky, and it is hard to know what is the monitor, what is a PC-talking-to-a screen issue, and what is a browser issue.
So thanks for some hard facts/screen shots and a new formula. All I have to do now is get used to figuring the maths with nested ems. And decide where I stand on the line-height issue.
> For example, this simple style: font-family: Techno, Impact, Haettenschweiler, sans-serif; will render at completely different sizes depending not only on the user's DPI setting, browser's default font size and zoom level and system's hinting settings, but also on which of the fonts are available, what arcane rules the browser in question uses to select a font from the list, where the font files came from and the phase of the moon.
Given that the font will display differently on different machines because of the user's size and zoom settings (which is a _good_ thing), why make a fuss if it displays differently for other reasons? You've already found a reason why the design has to be flexible, so just let go and accept that there may be a few more differences in the way the text is rendered.
Put this on your home page:
Is the text on alistapart.com too small?
A. Yes
B. No
I haven't read ALA for a while, and I'm pretty shocked by the comments. What is wrong by showing manners and using a bit more language to present your criticism other than 'idiot'? It looks like communities are going the same way as USENEt did: the drain.
Apart from that, one commenter expressed that he is happy to give control to the user, which is something I am for myself. However, I feel that using this method the comtrol is in the hand of the user: if you change your default font sizes in your browser preferences than you have to live with the consequentes. Scaling pages up and down will render proportional typesetting, which is what this article aims at.
I do not like page zoom like Opera and IE7 display because of scrollbars, so this method gives a bit more flexibility. Well written and very clear and tested examples!
When testing the 62.5% rule really at 62.5%? When testing font-size output in different browsers I found that Opera displays the font at the next smaller possible size at 62.5%.
So I tried to bring it up to 63% which worked out perfectly for all browser (ie 6-7, firefox, opera).
Anyone know the reason for this?
the funny thing is that only one person talked about the difference across browser's platform, the truth is this:
safari mac and safari pc = no changes in font sizes
firefox mac and firefox pc = big changes in font sizing
safari most consistent browser across pc/mac platform.
Firstly, Stephen Down wrote defending IE's non-resizing of fonts set in pixels: "Pixels are for when you absolutely need the text to display at a particular size, and browsers should respect that."
Not this argument again. All I will add is this: what if the text size chosen is considered too small by the user? Who dictates that they cannot choose to enlarge it? No-one should! To hell with fixed pixel fonts. Even IE5/Mac could resize fonts in pixels. (And even IE6 can enlarge pixel fonts if you use 'zoom:' in your stylesheet, or create a User Stylesheet. So it seems more of a bug than a deliberate feature, though I could be wrong. Anyway, since it is the only browser to do this, we can ignore it.)
Secondly, the person who wrote about enlarged text not fitting boxes in Firefox will be glad to know that Firefox 3 (released in beta form as I write) can enlarge the whole page. Of course now there are people complaining that they only want the text enlarging! Well an option for either method would be good. But at least Firefox has now joined the ranks of Opera and IE7 in intelligent page resizing. Zoom on!
Thirdly, I am viewing this site with the text enlarged myself, because I agree with others who say the text is too small. Just my opinion of course.
T really liked the article. Thank you.
I got tired of calculating the ems and wrote a small php-script to calculate them for me
Caveat: A work in progres.
.. and not the one you might think :-)
The syntax used is not only wrong, it will cause IE to not render anything after the comment - it's never considered closed…
instead of
<!—[if !IE]>—>
you should have used
<!—[if !IE]—>
Ran across the problem as I was using your guide, and suddenly, IE7 did not render my page at all - after changing the conditional comment as described above, it worked perfectly…
Also, if one considers quirksmode.org a reliable source, read here: "http://www.quirksmode.org/css/condcom.html":http://www.quirksmode.org/css/condcom.html
As was touched on earlier, I think this kind of debate points out the limits of CSS as a formatting model - the tinkering with CSS to produce consistent effcts is a rewarding challenge - but ultimately I always feel as though both HTML and css are already anachronistic, in terms of what they were originally purposed for - styling text documents - and what they are increasingly called on to do - i.e. structure user interfaces for web services.
I been asking this question to myself a thousand time and this is one of the best examinations of text sizes. Given me great insite into building my next website.
bq. Not this argument again. All I will add is this: what if the text size chosen is considered too small by the user? Who dictates that they cannot choose to enlarge it? No-one should!
My view on it is this:
You should be able to set a _minimum text size_ in your browser settings, so that no text will ever be rendered smaller than, eg, 12px (or whatever else you consider the minimum that you can read). This would be the equivalent of a user !important, and would override anything the website says or does.
You should be able to zoom the page (text, images and layout) to enlarge or reduce it as appropriate. Opera seems to do this better than IE7, but that may just be because I'm more familiar with it.
The designer should be able to make concrete layout _suggestions_ that the browser will respect where possible. That means that there are *some* occasions where the pixel size of text is important to the layout - eg, because it has to fit with images that are necessarily sized in pixels.
That's why we should *not* use px for font sizing as a matter of course - because it should be reserved for those occasions when you absolutely need the text to be displayed at that size - 99.99% of the time, ems or %s are the right way to go.
The main reason that browsers do support resizing of text in px is because they are trying to compensate for the idiocy of designers who have inappropriately specified text in px across the board.
I personally don't understand some designer's desire for such pixel perfect designs. Web pages should be more fluid than that (of course there are exceptions). I personally use em and fix the IE issue by setting the body font-size to 100%, as was mentioned in an earlier post. For the main content I generally use 1em because that should be the default. I don't do any .865em or whatever, I just make things relative, often .9em or 1.5em.
I don't care much for the zoom option in some browsers, but I do think it would be good for browsers to have both options of zoom and text size in-/de-crease.
Just as another vote, I find ALA text size too small. I'm currently viewing the page 3 notches up, though my eyes are tired, but usually use 2 notches for the site and I'm in my mid-20s and have good eye sight. Too many sites are decreasing their font-sizes. The default 16px is there for a reason like others have stated. Though I find it funny that the texarea box for writing a comment is quite a bit larger than all of the other text on the page.
Overall, nice article and good things to think about.
I first settled on pixels for font sizes after reading the original release of Zeldman's DWWS. Ems have a certain attractiveness, in that they let you set a base size and then set everything else in relation to that. That flexes nicely, if I want to rework a sheet with a new base size and have everything change proportionally without having to touch all declarations.
However, this is the sticky bit that I completely don't understand: What's with the compounding on nested items? Why in the world would I want to embrace a typesetting standard that requires me to keep track of where in the document hierarchy a piece of type is and then CALCULATE the proper setting to keep the type AT THE SAME SIZE? That's crazymaking. The push for standards was about stopping the madness, and it seems this is just an exchange of one form of madness for another. "Stop all the browser code forking!" (Hooray!) "Compute arcane, essentially meaningless size settings (1.375em
?), and make sure your nested items have their own settings (for each level of nesting) to compensate for compounding!" (Hooray?)
This is progress? All of this to accommodate a segment of users who have chosen to use a tool that doesn't do what they want? That sounds like a personal problem. Whatever happened to individual accountability? Why should an industry adopt an awkward, recursive practice of font sizing to fix something these users should be fixing themselves? Any self-respecting programmer would snort and walk away. Any self-respecting designer would just decide you're crazy.
Perhaps this is related to the notion that several have brought up about the rigid baseline grid being a typographic anomaly that has grown up in the soil of typographic ignorance on the web. Maybe those who are valuing "upsizing for all! (even apathetic IE 6 users)"? over and above sensible methodologies are mostly politically correct nouveau-web fanboys who are ignorant of the older, and more established streams of thought coming from the worlds of typographic design (dating to at least Gutenberg), and programming (Donald Knuth, anyone?) that inform these issues.
I think I'm sticking with pixels. Page zoom is a good solution. IE6 users are the only ones left out. Anyone with vision problems should do the research to solve their problem by changing browsers to one that does what they want. If they don't, then it's their bad, not mine. Web makers shouldn't have to jump through flaming hoops backwards to accommodate apathetic users who want to complain about type sizes when the problem is their passivity towards solving their own issue.
I try avoiding putting styles (like fontsize) on the P-tag because CMSs don't always relyably produce the desired clean HTML-output. Sometimes the editors used in CMSs produce a P-tag around the content, sometimes they don't. If you try to catch this in your templates by putting a P around where the content is loaded, you will get invalid code when de editor does produce the P (P within P).
So I try to put these styles on the surrounding DIV. Did anyone work out the alteration of this code to suit this need?
Someone had to do this testing - I'm glad to say that my non-scientific testing correlates to richards findings. Now I can rest assured that there is a proper way to set sizes in css - ems baby, ems.
Plus, I think guttenburg would be happy. The pixel shall not win this battle. ;)
I used this article while designing a site I'm working on now. I have always had problems with (em) and cross browser quirks, this is great for make those readily apparent. Previously I had giving up on em just because of all the browser issues associated with it. This method has proved flawless so far on the site, and I will probably use it on all subsequent sites I design.
Another awesome piece of research and testing, cheers Richard. If the article upsets me in one way, it's in realising that this sort of article should only be enforcing the test we've already carried out…unfortunately time and resource doesn't always permit so it's thanks to you again - this article will be passed around our developement team and adopted as apart of our coding standards.
Using ems (or any percentage method) to resize fonts pretty much guarantees sub-optimal design and legibility. This current "received wisdom" of web design, focusing so hard on technical aspects, generally fails to recognize the nature of pixel-rendered fonts.
Fonts cannot be resized successfully simply by using ems or any other percentage method. They are not like svg objects. Fonts are an art form and the size in pixels is critical. If you render a font at 80% that was drawn at, say, 18px in height, you do not get the same font 20% smaller. You get a different font that is usually less legible and less attractive, and is often downright ugly and hard to read. Resizing fonts by using percentage reduction is tantamount to resizing images by using percentages.
If you want your typeface to look good at different sizes, you have to retain style control. This means using fixed font sizes and providing alternate font sizes yourself, which is fairly easy to do through a server-side script.
Thanks for posting up your article. I've used the test pages you provided and looked at them in FF2/IE7 on a PC. Using the EM method you've described, there is still a large font jump in IE7 on the PC. Has anyone else noticed this, and is there a recommended cure?
Fantastic article, but on thing really stuck in my head as I looked thorough the countless screen-shot examples (cant beat pictures), the difference that ClearType makes with browser rendering in comparison to the mac fat'n'furry soft rendering.
I get that its a personal preference, but wouldn't it be great if Apple and MS could just agree that fonts should display as they were intended to by their designers.
Hi Richard,
This is a wonderfull experiment and I would like to thank you very much for sharing it with the world. However I have an objection inregards to your conclusion.
First please let me draw your attention to what you have here:
The tests that you have done are based on the following environment:
1-Tests have been done with limited number of browsers as you pointed it out yourself but they are not the majority of the browsers as you mention in your article.
2-Tests have been done in two operating systems.
3-Tests have been done with one font-family.
4-Tests have been done in a two column layout.
5-Tests have been done with XHTML strict doctype and charset=utf-8
So what is the objection?
Even though I look at the conclusion of your article positively (and BTW i have experimented myself in some part of my site) however I believe it only applies to your experiment and cannot be generalized as you have generalized in your article.
Clearly there are other factors which affect the rendering of a web content. The structure of web content and the environment in which the web content is present are the most important part affecting the rendering process.
As you know It is possible for a content to be rendered correctly in one layout / browser/platform however with problems such as overlaps in the same layout but in different browser/platform or in different layout / browser/platform.
So if we use another layout or structure other than two column layout or another font-family, etc. it is possible to see some inconsistencies or it needs to be proved by some more experiments that there are no any inconsistencies.
So basically it is not enough for a text or any element to be a cross browser/platform text / element. It also needs to act properly in relation to it's neighborhood preventing any layout stability problems when viewing normaly or when resizing the browser's window or applying zoom etc..
That is why I have defined the layout stability on my site located at cssfreelancer.awardspace.com to address this issue.
As you can see in my site, I have:(I am aware of that 62.5% thingy :), I have experimented the following too)
body { font:96%/1.7 georgia,serif}
Line-height (unitless for body but in ems for the rest of the elements)
Then I have two sections. 1-Navigation elements 2-Rest of the document.
I have set the font-size in ems for Navigation elements and no font-size declaration for the rest of the document. That is set for all browsers.
With the above combination of font-size and line-height, I have experimented my layout using browsercam's online service with different browsers including IE6,IE7, AOL, Camino, Konqueror, Different versions of (Firefox, Netscape, Opera, Safari,Mozilla, ) on different platforms such as Windows Vista, Windows XP, Windows 2000 Professional, Linux and Macintosh. The screen captures are available at the following
My experiment proves that, for my layout and with my test parameters like font-family etc. setting the above mentioned CSS rules turns out to be a consistent cross browser and platform solution.
However I still can not generalize it and I am still debating on it.
Any comments in this regard would be greatly appreciated.
I had the same problem and could not figure out the problem. But since I have a large monitor and bad eyes I changed my dpi to 120. And apparently IE7 takes that into account when displaying fonts. All is good now that I switched my font dpi back to 96.
@article base case - "For most people (designers, clients, and their customers) 16px is too large for body text" is a rude and unsupported assertion. While empirically it can be said it is quite evidently true of web designers, the same cannot be said of the other two groups. The "size" of 16px has been creeping down for over a decade as the average PPI has been creeping up. While it may well have been true over a decade ago that most people agreed the defaults were too large, there is no published evidence anywhere I have found to support that assertion against the average current environment. OTOH, there is at least some published support in contradiction "http://www.useit.com/alertbox/designmistakes.html":http://www.useit.com/alertbox/designmistakes.html and recommending that user default size be respected "http://www.w3.org/QA/Tips/font-size":http://www.w3.org/QA/Tips/font-size to be found on other than my own web site.
Konqueror defaults to a pt size that is less than 16px when the DPI is 96. All IE browsers default to 12pt, not 16px. 16px only appears to be its default as a consequence of the a default M$ system setting of 96 DPI. Use of other than 96 is common on recent and current laptops (which, by the way, have been outselling desktops for several years), which typically have a considerably higher than average PPI and need OEM correction to avoid illegible text on their already small displays. Manufacturers have made 120 DPI a virtual default for laptops. The result is IE and other browsers whose defaults are not set in px give users who have not made further corrections 20px @ 12pt instead of 16.
@article&more; (Richard R, David L, others) - Line-height set other than unitless is a bad habit. That only unitless carries down the cascade as a factor rather than as a previously computed value is a good thing. It means when zoom or minimum font size are employed by the user's agent to turn your mousetype into otherwise legible text that that text is not constrained to a space into which it cannot fit without overlapping the text above and below it. See "http://mrm.no-ip.com/auth/line-height-inherit.html":http://mrm.no-ip.com/auth/line-height-inherit.html to understand the problem.
@1 (Kari P) - IE em sizing problems are complicated. As answered earlier, setting a % size on body eliminates IE's basic compounding problem. What hasn't been mentioned is that the various browsers round differently. That means the starting point can be different right off the bat, but as they cascade and additional sizes are added, the rounding differences also compound. Take a look at "http://mrm.no-ip.com/auth/Font/font-rounding.html":http://mrm.no-ip.com/auth/Font/font-rounding.html for more detail via a testcase.
@5+ (James S, more) - No one here yet mentioned a not inconsequential result often encountered on pages using the Clagnut/62.5% method. 62.5% is really convenient only for designers who think they need to size things in relation to this variable and unknown size thing called a px. Invariably these designers prefer text in their work to be a smaller size than average people are comfortable with. For defense against this rude designer behavior, modern user agent makers include functions like text zoom, page zoom, and minimum font size. When text zoom and/or minimum size are applied by user agents based upon the Gecko rendering engine, the ostensibly intended effect is multiplied in a manner similar to IE's font sizing of ems that aren't applied against an ancestral % size. The effect is truly overlarge text (based upon the visitor's preferred size), often producing overlapping and/or hidden (inaccessible content). "http://mrm.no-ip.com/SS/Clagnut/eonsSS.html":http://mrm.no-ip.com/SS/Clagnut/eonsSS.html demonstrates the problem with screenshots, but you can easily see for yourself by setting equally default size and minimum size to a size significantly more than 16px and then visiting a 62.5% site, such as "clearleft.com":http://www.clearleft.com.
@26 (Voyou D) - Please stop repeating the mantra. The defaults stopped being "big" years ago. For most web browsers the default size measured in px has not changed for at least 12 years, and probably much longer. Because of the decrease in average PPI over the years, the apparent default size has been decreasing. To the rest of what you wrote, well said.
@32 (Adrian D) - It isn't a little rude, it's a lot rude.
@37 (Jason S M) - Not only does changing your browser defaults not not make perfect sense, you're derelict in your testing thoroughness to not be constantly changing them to emulate the wide range of possible user conditions. There are too many variables in user environments to assume that users have one resembling your own, regardless what the system and browser settings were when you got your own hardware. Assuming any user setting to be wrong and in need of arbitrary adjustment by someone with less than 100% of the situational facts is nothing short of rude.
@39 (Stephen D) - Web browsers are user agents, not web page author agents. Those incapable of accommodating user wishes and needs are broken. It doesn't matter what your design requires or the CSS specs seem to say. If I can't read it, it's worthless.
@48 (Dusan S) - Modern open source operating systems can and do detect display DPI, thus rendering text on screen sized in pt exactly the same size as when printed. The problem is that screen resolution falls short of print resolution, while the average distance between text and user's eyes is considerably greater for screens compared to books, magazines and newspapers. Text on screen usually needs to be physically bigger than printed text in order to be equally comfortable to read, or even legible. Firefox for Linux and Mac do allow a different assumed DPI, but there is no UI for changing it. Type about:prefs in the urlbar, then dpi in the search box to find the pref.
@55 (Andrej T) - Decimals in font size rules are ignored by IE. 62.5% is treated by it as 62.00%.
@62 (Kendall C) - If you're in the design business, you'll probably find yourself back on ALA often. Make yourself a user stylesheet that applies exclusively to it via Gecko's @-moz-document facility and you won't know about its tiny text until it gets a CSS overhaul that breaks your overrides.
@68 (Mason B) - If you're using a decent modern display better than the median, you have enough PPI that small differences in font sizes should produce no apparent qualitative differences. I don't ever find smaller than my default fonts easier to read, regardless how many px it took to render them, or how good they "look". Indeed, if you render a font at "font-size: 80%" that was 18px in height, what you actually get is a font 64% in size. CSS "size" is only nominal, not real. Real size is a function of both height and width. A 16px character contains around 128 discrete px, measuring around 8px wide by 16px tall. A character box exactly 80% of 18px high would be 6.4px wide by 12.8px tall, providing about 82 discrete px.
Be part of the solution to the problem rather than part of the problem. Accept that 100% of the default size is best. Personal computers are intended to be personalized. Assuming they have been is the right thing to do, no matter how few have actually had it done. Just because web designers all think browser makers are morons is no justification for assuming smaller is better for anyone other than yourself. If the defaults are too big for you, personalize your own PC, not mine.
Jay's comment perfectly sums up my feelings on this whole ridiculous practice.
Where can i get the page zoom tool?
I still have doubts regarding the best solution of what type of font to use. Still testing different variations.
Keep up the good work.
I´ve got much problems with the text size in Ie and Firefox, too.
But this discussion and it´s including links helps me a lot.
Thanks everybody
@61 included: "That means that there are some occasions where the pixel size of text is important to the layout — eg, because it has to fit with images that are necessarily sized in pixels."
However, there is an easy method to size images in ems - see http://www.wats.ca/show.php?contentid=33 for example.
You're right that keeping track of the math percentages with ems can be tricky. Luckily, with a good handful of browsers for testing, and a logically laid out stylesheet, it gets much easier.
Being that I don't have the grasp of CSS that the author surely does, i'm sure my comments might not be appreciated….. I am of the opinion that it is best to set the pixel size absolutely as most sites (should) have a significant amount of content. As a designer, I prefer knowing exactly where every letter is going to appear in relation to every graphic. It helps me to visualize where images should or shouldn't go and more. Of course, I am a bit old school in my methodology, but it is still my preference :)
I liked the effort that was put into this article. That was a whole lot of screen captures and thought.
*Thank you!*
I came to this site as a whole, looking for the answer to a question:
How can I/we create documents, that might be one or more pages and be shown one any platform (I use Ubuntu) or browser, print correctly onto pages (at the right DPI for images for example, over 72dpi), scale to work for those with vision needs/screen resolution/device…
not have to rewrite/change/tweak/etc the content?
And be hyper linked together so one document can be related to another.
I have found that using table-less valid strict XHTML code and CSS for style while basing most (if not all) things on _em_ makes the cross platform - cross browser challenge fairly do-able.
_I was inspired towards this back in the CSSzenGARDEN days._
_Thanks to all you designers that made that site rock!_
But then there is printing and portable devices and better accessibility.
One only lives so long. How many times do we really want to recreate the same document/content for a new device, browser, printer, email or software just because a decade has passed
-or MS has some new notion of how to keep people locked into THEIR closed source-
As artists, do you not want to create new art instead dredging through old documents and recreating old documents to work with current technology?
A paper page is the size a paper page which is fixed and yet not as and now we have many countries and thus pages sizes.
What is the best approach for the long run?
There is much ado about creating web page/site that work for what ever is current and happening in the now like a fluid 3 column lay-out but
I am asking/questioning/yearning about content.
Even the content I write at this moment is UNUSABLE again with out tweaking because it is coded to Textile which seems to only be some what working and is not XHTML…
Seems like the CSSzenGARDEN site slowed way down for a while and they look like they are going strong. : )
The A List apart is an A list site for sure. Thanks again…
Table cells with multiple lines break the rhythm of the complex example. I checked it using the "background image":/d/settingtypeontheweb/images/gridbg.gif
There's also a easy trick for this one:
An em is 16px.
10px equals 62.5% of 16px, or an em.
So if you put the font-size for the body element to 62.5%, it's easy to calculate the other ones.
E.g. if you want 12px font-size, you just put in 1.2em. Because 1.2 * 10 = 12.
Generally, I love ALA's typesetting, and this article was good. However, when I went to the complex example, I noted something that from the standpoint of readability is just plain wrong: The same amount of vertical space before and after heads, esp. subheads. As a reader, you need visual cues to connect a [sub]head to the text it is heading; therefore, there should be visibly more space ABOVE the head than below it. Not to pick specifically on this writer—I see this all over the web.
A very informative article, however…
When it comes to CSS, positioning containers is the real pain. Choosing some lovely font sizes and colours is a nice gentle way to finish off an otherwise stressfull afternoon of building a CSS website.
There are two properties that allow you to automatically set the capitalisation of your text. First, font-variant allows you to set all your characters in small versions of capital letters.
p {font-variant: small-caps; }
That would create text like this. It looks cool, and works well for acronyms, like NATO. The second property is text-transform.
div {text-transform: uppercase; }
Can someone please explain why, in the "complex example", the multiplier is usually 16, 14, or 12, and in one instance it is 18?
font-size: 1.125em; /* 16x1.125=18px */
margin: 1.286em 0; /* 14x1.286=18px */
border-bottom:0.083em solid #ccc; /* 12x0.083=1px */
margin:1em 0; /* 18x1=18px */
Thank you
I've used the principles in this article as my best-practices for years. However, my company just stopped supporting IE6 last year and we are now revisiting our best practices for sizing text. Since most browsers now use page zooming, we've considered switching to pixels to size our text, but our new concern is mobile browsers. How well do mobile browsers handle different units? Which unit is best to use with mobile browsers in mind? I've heard many say that Ems are still the best practice for mobile devices, but I've noticed that iPhone 4 doesn't seem to size the complex example http://www.alistapart.com/d/howtosizetextincss/complexexample.html from this article correctly. Is it better to use pixels for mobile?
Most of the wordpress themes that I have encountered do have a widget or plugin to allow visitors to change the text size, as it is sometimes too small from default, and messing with the CSS can be a pain at times.
Thank you for the article and your effort.
I just thought I would offer comments now that it is almost 4 years old, and surely out of date. It seems like this article advocates acrobatics of web design with ems, percentages etc, when, to me, if you can't read something you magnify it with glasses or the equivalent, zoom, on your browser. Magnifying the text and images (line height etc) keeps their context and their visual relationship constant - a good thing. advocating the ability to resize the text while keeping other things like images constant is a misguided idea because when increasing text size eventually the relationship of text to images gets uglier and nonsensical. If there is a need to magnify text, wouldn't it also help a visually impaired type to magnify the images, too - bring them into focus?
In addition, I agree with the unpopular Brad Kemper - good typographic practice is to add less than a line between paragraphs - I prefer 1/2 a line. I am not a coder giving my typographic opinion, but someone who has lived and breathed typography for many years and has been recognized for skill in typography. I am not too familiar with the author's concept of vertical rhythm, but vertical rhythm should not be slavishly adhering to a baseline grid - that would be a monotonous rhythm - not to interesting and rather mechanical.
I'm with Josiah in that I too, am curious which unit is best to use with mobile browsers in mind?
It would be nice to get an update to this article with mobile devices in mind. I'd be curious if EMs are still the best solution, or if something like REMs with an appropriate fallback or pixels is preferred now. Pixels seemed to have gain a lot of popularity for sizing fonts.
I know in jQuery Mobile they use pixels for font sizes and also in the HTML5 Mobile Boilerplate:
body { margin: 0; font-size: 13px; line-height: 1.231; }
Yet knowing a pixel is no longer a pixel on some new devices like the iPhone4, it makes me think pixels aren't the correct solution to sizing fonts on these newer mobile devices where the pixel ratio isn't 1:1. I havn't done any testing on font-sizing on mobiles yet but I would think EMs or REMs with an appropriate fallback will be the best solution for mobile?
Just picked up an old book of mine called Bulletproof Web Design. It suggests setting the body font size as a Keyword…. small… and percentages to stray form the base. eg h1, 150%
This seems rather a good idea than having all that crazy em mathematics. What do you guys think?
If this is ever updated please include more sample calculations. Font size ems seems to be easy to figure out, but the line heights - especially when the font is larger than 18 pixels is giving me a headache LOL. Similar to @lauras2009 question above.
It's also not clear to me why this was updated away from the 62.5% rule, when that kicked out such lovely round numbers and made the maths so much easier.
Richard thank you for presenting this info so clearly. This is another element in a developer's bag of tricks to help create responsive web design.


text:
In some case associated with this loaning technique, the lending university purchases the right given rate of lifestyle credit cartomancy sales return to get cash in the marketplace today. According when you need to the FTC, the offenders operated under a sponsor of make believe business makers that recommended an association with a very law stable or the latest law enforcement agency, certain as Global Legal Services, Allied Court costs Group, United Judgment & Appeals, Dockets Liens & Seizures, plus United Perception Center. Using only robocalls then voice communiques that threatened legal procedures and detain unless consumers responded immediately, the offenders collected then processed large numbers of hard cash in collection for phantom debts.
High Quantity of Interest: According regarding the Individual Federation of America (CFA), Payday loans maintain an excessively high interest quantity. You will be able to simply incorporate this stage to decreasing the complete curiosity payable or get greater health conditions and variables on an payday payday advance. It is very much necessary for payday lender lenders in just New You are able to to develop into affiliated offering a loan company outside associated the suggest. Where does your paydays go every different month?
They finish this written by filing a brand new UCC (uniform commercial code) lien dealing with the operation. It is in fact an unsafe loan where consumers could certainly avail expected amount when the limit of 80-1500. Your organization should obtain a standard bank account as a logical debit gift card.
If your financial plan is functional and applying for card unsecured debt is at least then you will minimize a need for Cash advance lenders online and build your saving account as a way to supply desperate cash. This tactics if the business totally does not spend more the bad credit loan as do we agree and the business is normally sold, completed or liquidated, the marketer cash advance lender would have a suited to those proceeds that would satisfy any unpaid balance due before currently the business user does.
Filling through an form submission online is on the entire rise expected to the convenience by which this personal preference offers. With advance loans certainly no faxing, several is never credit investigating and hardly any collateral demand making that loan application process of fact very easy so quick. In the case when you begin doing not pay for medical electric bills on time or inserted the monthly power bills off, the particular provider could possibly send a new information to help you the acknowledgement bureaus, what kind of diminishes all your credit.
Salaryday loans are undoubtedly appropriate over people yearning for fast cash flow. The just about all process towards getting the foregoing loan comes to an end over planet. Secondly, the very attention cost that can now be demanded on generally lending products have also been governed. It will probably provide a real great development of on-time payments when managed safely and securely.
Sometimes, the personal loan amount is regarded as fixed by means of the organization on usually the basis to do with this potential salary together with the discharged person. If a person will have the whole the called for documents and consequently you can be found a commercial member akin to United Statements then you really can consider the gains of Salary day Loan care.Hope you desire my blog post.


text:
The five Burbank residents running for two open seats on the Burbank Unified school board already agree on two main goals: maintaining academic performance and incorporating more technology into the classroom.
Here's a look at the five candidates running for the Burbank board of education.
David Dobson, 50, has lived in Burbank for 12 years and is running for the first time for a seat on the board.
A freelance video editor and father of two children in Burbank schools, Dobson has been involved in the parent-teacher association for 12 years and is current PTA president at Disney Elementary. He's also treasurer for the PTA at Jordan Middle School.
His reason for running falls is in his drive to serve, he said, and one of his main priorities is the implementation of technology in every Burbank classroom. He said the benefit of working on the PTA has enabled him to learn how to work with parents, teachers and booster clubs to bring positive change to schools.
"I feel like I'm talking to a lot of groups of people, a lot of whom tell me they're not being heard from the board," he said. "There's a host of challenges, and I believe in those challenges there's an opportunity to start to make schools of the future, instead of hang on to what we've done the past few years."
Charlene Tabet, 48, taught middle school students in art, math and language arts in the Montebello Unified School District for 10 years.
A Burbank High graduate, Tabet is recently retired and now manages rental properties.
Tabet's three children have attended Burbank schools and, for a combined 17 years, she has been involved in the PTA, working her way up to president of the group at Thomas Jefferson elementary and John Muir middle schools.
"I love Burbank and that's part of the reason why I'm running," she said. "Burbank is my heart and soul and I'm an educator. This is my way of giving back to make sure Burbank stays as wonderful as it is."
Larry Applebaum, 53, is a Burbank native and current president of the school board.
As a contractor working in residential remodeling, he has sat on the school board since 2005, when he was more concerned with bringing arts and music back to elementary schools. The argument for arts was the same one he presented in 2003 when he first ran for a seat on the board and lost.
But now with eight years as a school board member behind him, Applebaum's new focus is bringing more technology and a dual-language immersion program to the district.
"I may not have fully accomplished my goal, but I have accomplished it to a high degree. I believe that's already on the train track," he said of the arts programs that have been implemented. "There's critical mass and force behind that. I don't see that with technology and I don't see that with language."
Armond Aghakhanian, 41, has lived in Burbank for six years.
As an adjunct professor for Woodbury University, Aghakhanian has taught business classes and courses on leadership, social responsibility and government.
He has also taught Burbank High School's Finance Club.
Before he worked as an academic, Aghakhanian spent several years working for the California State Assembly, at one point under Assemblyman Dario Frommer, a Democrat and former a majority leader.
In his campaign to run for a seat on the school board, Aghakhanian said his main priority is to sustain Burbank schools.
"I am running for the school board to guarantee that all of Burbank's children have access to the best public education," he said in an email, adding that he will push for small class sizes and for more individualized learning.
He is the father of a 1-year-old son and also supports more technology in the classroom and exploring alternative materials and energy sources for students to use to keep them environmentally friendly.
Steve Ferguson, 23, is a Burbank native and owner of a consulting firm who works on political and media campaigns.
Ferguson has been involved on city boards and commissions since age 11, when he became a member of Burbank Youth for Youth and later worked on the Mayor's Youth Task force and sat on the board of the Burbank Park, Recreation and Community Services.
Ferguson recently ran for a seat on the school board in August when school board member Debbie Kukta left her seat to take a post as Burbank city treasurer. When the school board's final vote came to a tie between Ferguson and Burbank Police Lt. John Dilibert, school board President Larry Applebaum broke the tie by giving his vote to Dilibert.
In his continued effort for a seat on the board, Ferguson is focusing on local leadership.
"I'm running, ultimately, to preserve the Burbank standard of education in our schools," he said. "I believe the federal level and state level of government continue to fail us. I believe it's up to us on the local level."
Locally, though, Ferguson sees challenges in a politically divided Burbank.
"Politically, we are community that has become very divided. More than anything, I want to be a leader for the entire community and not just half of it."
Follow Kelly on Twitter: @kellymcorrigan.


text:
You can find the free Balloonfest Dallas wallpaper below, it is available in various screen resolutions to use on your computer (Apple, Windows, Linux). Use the arrows below the image to view more travel photos or the links in the menu on the left to display the photo galleries.
Want to know more about the location on this photo? See Dallas information on Wikipedia.
The photo of Balloonfest Dallas was taken by Mr. Gary Crooms and is available for free download as desktop wallpaper. Click on the picture format that fits your monitor best.
Download Formats
4:3 screens
|previous image


text:
London chimes in on 'Watchmen'
Reviews mixed after Tuesday's premiereLONDON -- The $120 million comic book adaptation "Watchmen," one of 2009's most eagerly awaited films, has had its world premiere in London, and reviews on Tuesday cast the movie as classy but no classic.
The red carpet launch late Monday of the special effects-laden action thriller is the culmination of years of to-ing and fro-ing over scripts, budgets and, finally, a legal dispute between rival Hollywood studios.
Directed by Zack Snyder, whose "300" was a boxoffice winner in 2007, "Watchmen" is based on a 1986 comic book series written by Briton Alan Moore and illustrated by compatriot Dave Gibbons.
Critics gave it mixed reviews, with several predicting approval from the hardcore comic book fan fraternity.
How it plays to a wider audience, however, will be more important to its commercial prospects.
"For those just watching 'Watchmen' for the Watchmen, without any expectations or knowledge of the comic's storyline or historical importance, this really will be a blast," wrote Mike Ragogna in the Huffington Post.
But Robbie Collin, of Britain's top-selling tabloid weekly News of the World, disagreed:
"This two-and-a-half-hour wannabe pop culture epic isn't the worst superhero movie ever made ... but it is one of the most spirit-crushingly disappointing," he said.
As with other movies based on his stories, Moore has distanced himself from the film, which hits cinemas in Britain and the U.S. on March 6.
Asked if Moore was likely to watch the movie, deemed "unfilmable" by some in the business, Snyder told Reuters: "Look, you know Alan has famously said 'I don't want anything to do with it,' and I just try and respect that as much as I can."
"Watchmen" is set in an alternate 1985 United States, where the "Doomsday Clock" charting U.S. tensions with the Soviet Union, is permanently set at five minutes to midnight.
When one of his former colleagues is found murdered, masked vigilante Rorschach sets out to uncover a plot to kill and discredit all superheroes, both past and present.
The film contains scenes of sex and violence, earning it an R rating in the U.S., meaning under-17s can see it only with a parent or adult guardian, limiting its commercial potential.
The fate of the film was in doubt until last month, when studios Warner Bros. and News Corp.'s Twentieth Century Fox reached a settlement in a copyright infringement dispute.
Warner Bros., a unit of Time Warner, produced the film, but Fox sued Warner last year to stop its release. Fox, which acquired the rights to the "Watchmen" story in 1986, claimed it had a continuing stake in the project.
Warners also was behind "The Dark Knight," the Batman sequel which was last year's biggest grossing film globally with ticket sales of $1 billion.


text:
Two weapons and a bullet-proof vest were stolen Friday from an unmarked police car outside the home of an officer in Brooklyn Park, Anne Arundel County police said.
After parking the car Thursday evening, the Anne Arundel County police officer discovered the door and the trunk of his car were ajar the next morning, police said. Missing were a ballistic vest, a Colt AR 15 rifle, a .40-caliber Sig Sauer handgun and ammunition. The items were secured in the trunk out of view, police said.
Police ask anyone with information to call Metro Crime Stoppers and the Northern District Detective Unit at 410-222-6135.


text:
Working long hours with tools and machines that never rest is how you get ahead. But when one of those tools or machines breaks down the losses in both dollar and time are STAGGERING to your business.
PEPPER MAINTENANCE® HELPS PREVENT THESE BREAKDOWNS, by looking at your business through a new lens, literally. With the Pepper Maintenance® team's suite of services, you can now see problem areas in your factory, machine, and motor before they break down.
Production is KEY to making your profits grow, and investing in the means for production enhances those profits. The latest technologies and knowledge, used with RELIABILITY BASED MAINTENANCE PRACTICES, will ensure your facility's health is running at OPTIMUM levels. The technologies utilized by the Pepper Maintenance® team, will also give decision makers quantitative means of basing repairs and regular maintenance frequencies.
Also called "thermal imaging," infrared thermography is the study and analysis of heat. Infrared thermography uses the law of thermodynamics. Although electrical applications are the most widely recognized, uses extend far beyond the electrical to motors, bearings, drives and belts.Read More
Vibration analysis is a natural diagnostic tool for equipment. Vibration--the destructive movement present in all rotating machinery--needs to be understood for infrared analysis to be done in the most effective manner. There are many causes of vibration.Read More
In the fall of 2010, a new service was added to the menu of options offered by Pepper Maintenance® — precision laser alignment in the installation of new and the adjustment of existing equipment. Laser alignment, infrared thermography and vibration analysis work hand-in-hand to bring the latest technology to your facility, making our goal of reliability based maintenance easier to achieve.Read More
Ultrasonic inspection is a reliability based maintenance tool that can help with the identification and location of electrical anomalies that may not be detectable with conventional methods. Ultrasonic inspection works hand in hand with our very successful and reliable infrared thermography inspection services.Read More
Precision installations are performed by Laser Alignment Specialists verified by Certified Vibration Analysts and Level II Infrared Thermography Technicians.Read More