I've not used PX sizing for well over a decade. We did recently change to using REM's off of a % on the HTML.
The site in question uses a % on the HTML and REM's on the typography with PX in a legacy IE-only (for those that don't support REM). I can't post an URL as its internal, but it uses similar base to http://www.gallupstrengthsfinder.com (except the GSC site cascades PX to REM's instead of having a separate conditional, the internal site has them separated out with a conditional.) html { font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } P (etc etc) { font-size: 1.6rem; line-height: 1.5; } ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief -----Original Message----- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Felix Miata Sent: Friday, April 04, 2014 5:38 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Firefox and page inflation On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed: > Looking for insight into (and potential correction to) the latest > Firefox browsers inflating the overall size/resolution of webpages. We > use a mobile first responsive upwards, and in the newest Firefox > browsers, what is a reasonable font size in every other browser > becomes ludicrously large in Firefox on high resolution monitors. > From what I'm seeing on the dev pages, this is intentional for sites > that do not use large font sizing > (most) at the high resolutions. But we are doing so in our newest sites. > I'd rather not deliver FF specific font sizing, but will if I must. > Any ideas? Fixes? Things to avoid? You're using px for sizing text and its containers, right? If yes, stop doing that, and the "problem" will disappear. In the first place, it's only the user who is in position to determine "reasonable font size", which size is presumptively the size configured as her personalizable browser default, CSS medium. When you respect a user's default by leaving the base size unaltered, and only apply relative sizing via keywords, em, rem or % to elements that actually need a contextual sizing adjustment, the integers-only Gecko device px to CSS px ratio and display density/"high" resolution are non-issues. The math involved with not using px is simple enough. Just think of one px as .0625rem (1/16). If you want a block to be 960px wide, divide by 16, which makes it 60rem. In viewports in which the as-shipped 16px default remains in effect, 60rem will be 960px, while in those using higher densities, more px will be used, but your design proportions will be preserved. -- "The wise are known for their understanding, and pleasant words are persuasive." Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use it. ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
