Font more biger on Windows than Mac, break the grid system layout

Hay all

I have one project designs wordpress theme for newspaper-magazine website, it’s using Grid System 960 gs, Jquery-UI and Georgia font.

Every thing looks great and beautiful on Mac (Safari, Chrome, Firefox and Opera), but when it’s looking on Windows turn to nightmare, font more bigger, menu become 2 line (1 line on mac) etc.

Here’s screenshot

in Firefox on Mac

in Firefox on Windows

I have done some simple trick with this problem. I’m changing Georgia font with Arial, and viola it’s look good both on mac and windows. But I want it with Georgia not Arial!

Here’s screenshot

On Mac

On Windows

Here’s Live preview both with Georgia and [URL=“http://static.timesmark.com/www/mac-win/arial/Tes.html”]Arial

Have some solutions for this problem?

Thanks :slight_smile:

That article link is funny as hell given the use of illegibly small fixed metric fonts in a serif face that somehow seems to disable font -smoothing on Windows and/or isn’t optimized right for it. (that or it’s just a really ugly font for screen)

Man, that guy’s blog is a total Accessibility /FAIL/

It isn’t just about non-consistency of browsers, it’s also about non-consistency of operating systems, and of users’ settings. You can’t control what font size people have set on their computers, and if them having a larger font size breaks your layout, that’s a problem regardless of browser differences.

Thanks for the advice.

Here more information about this design.

First : The final design (all content, etc just a sample) is on http://demo.timesmark.com/

Second : Answering for deathshadow60

  1. Windows and Mac have Gerogia font, and on my environment I uses Paralel Desktop to boot windows, and the font is identical (I’m copying it from Mac)

  2. I’m not using static font (at least on body), look on its body’s CSS

body {
font-family:Georgia;
font-size: 67%; /* 12px /
line-height: 1.5em; /
15px */
color: #333;
background-color: #F4FBFB;
}

I will check my code again to fix fixed-font-size as your advice here
3. Grid is request by design, that’s the problem. That’s Why I need some tricky code.

Honestly for this design, I’m learning on CNN and NYT design especially on font, size and its colour

Thanks man still need more advice :slight_smile:

I’m going to be brutally honest with you here, please don’t take offense, I’m trying to help.

  1. If Windows and Mac use different font renderers and do not have the same fonts available, so any design that relies on the width or size being the same is made of /FAIL/.

  2. It appears to be static font sizes, which is an accessibility /FAIL/ which is why for large font/120 dpi users like myself your page is illegible unless I zoom in 30%.

  3. A bloated CSS library that defeats the point of using CSS, a fat bloated scripting library on a page that by what I’m seeing in the pictures shouldn’t need ANY javascript, and a non-standard font that nobody except mac users are going to have probably means you shot your horse in the foot before the gate even opened!

Given the train wreck of markup, meaningless/pointless class-names (thanks grid), use of fixed layout elements my advice would be to pitch it in the trash as there’s nothing worth even trying to save on that page. Get rid of grid, drop-kick jquery, stop trying to use px metric fonts and yes, that means *** OH NOES *** some text might actually go to multiple lines. Lose the idea of the 100% width text-stuffed menu… basically you have a non-viable layout put together with unnecessary bloat and antiquated coding techniques.

This is evident given that 90%+ of the classes and div on the page are completely unnecessary for the layout!

Had I coded the same thing, there is little if any reason for that to be a whole lot more than:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Times Mark News
</title>

</head><body>

<div id="pageWrapper">

	<ul id="mainMenu">
		<li>
			<a href="/">Home</a>
		</li><li>
			<a href="/category/video/">Video</a>
		</li><li>
			<a href="/category/world/">World</a>
			<ul>
				<li><a href="/category/world/us/">U.S.</a></li>
				<li><a href="/category/world/latin-america/">Latin America</a></li>
				<li><a href="/category/world/africa/">Africa</a></li>
				<li><a href="/category/world/asia/">Asia</a></li>
				<li><a href="/category/world/europe/">Europe</a></li>
				<li><a href="/category/world/middle-east/">Middle East</a></li>
			</ul>
		</li><li>
			<a href="/category/business/">Business</a>
		</li><li>
			<a href="/category/sport/">Sport</a>
		</li><li>
			<a href="/category/entertainment/">Entertainment</a>
		</li><li>
			<a href="/category/technology/">Technology</a>
		</li><li>
			<a href="/category/science/">Science</a>
		</li><li>
			<a href="/category/health/">Health</a>
		</li><li>
			<a href="/category/autos/">Autos</a>
		</li><li>
			<a href="/category/art/">Art</a>
		</li><li>
			<a href="/category/style/">Style</a>
		</li><li>
			<a href="/category/travel/">Travel</a>
		</li><li>
			<a href="/category/opinion/">Opinion</a>
		</li>
	</ul>

	<div id="newsCategories">
	
		<div class="subSection">
			<h3>Business</h3>
			<ul>
				<li>
					<a href="/2010/08/spain-unemployment-rate-at-13-year-high/">
						Spain unemployment over 20%
					</a>
				</li><li>
					<a href="/2010/08/most-made-in-u-s-a-cars-are-japanese/">
						Most 'made in U.S.A.' cars are Japanese
					</a>
				</li><li>
					<a href="/2010/08/china-closer-to-becoming-second-largest-economy/">
						Is China second-largest economy?
					</a>
				</li><li>
					<a href="/2010/07/lebanons-ultimate-export/">
						Lebanon's ultimate export
					</a>
				</li><li>
					<a href="/2010/07/optimism-rises-in-japan-manufacturing-slows-in-china/">
						Optimism up in Japan, down in China
					</a>
				</li>
			</ul>
		<!-- .subSection --></div>
				
		<div class="subSection">
			<h3>Sport</h3>
			<ul>
				<li>
					<a href="/2010/08/marquez-is-closer-to-joining-red-bulls/">
						M&#225;rquez Is Closer to Joining Red Bulls
					</a>
				</li><li>
					<a href="/2010/07/tracing-the-rise-of-afghan-cricket/">
						The rise of Afghan cricket
					</a>
				</li><li>
					<a href="/2010/07/nicklaus-eyes-golf-as-global-game/">
						Nicklaus eyes golf as global game
					</a>
				</li><li>
					<a href="/2010/07/maradona-i-was-lied-to-and-betrayed/">
						Maradona: I was lied to and betrayed
					</a>
				</li><li>
					<a href="/2010/07/soccer%e2%80%99s-growth-in-the-u-s-seems-steady/">
						Soccer&#8217;s Growth in the U.S. Seems Steady
					</a>
				</li>
  		</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Technology</h3>
			<ul>
				<li>
					<a href="/2010/08/firefox-4-beta-adds-multi-touch-support/">
						Firefox 4 Beta Adds Multi-touch Support
					</a>
				</li><li>
					<a href="/2010/08/space-station-experiences-coolant-problems/">
						Space station experiences coolant problems
					</a>
				</li><li>
					<a href="/2010/08/the-robot-that-visits-your-cubicle/">
						The robot that visits your cubicle
					</a>
				</li><li>
					<a href="/2010/08/at-139-is-the-new-kindle-cheap/">
						At $139, is the new Kindle 'cheap?'
					</a>
				</li><li>
					<a href="/2010/07/67/">
						NASA's Twitter feed hacked
					</a>
				</li>
  		</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Entertainment</h3>
			<ul>
				<li>
					<a href="/2010/07/are-classic-cars-dead-as-history-repeats-itself/">
						Are classic cars dead?
					</a>
				</li><li>
					<a href="/2010/07/august-on-inside-the-middle-east/">
						Racing boats among the Emirati youth
					</a>
				</li><li>
					<a href="/2010/07/whats-behind-the-grin-of-yue-minjun/">
						What's behind the grin of Yue Minjun?
					</a>
				</li><li>
					<a href="/2010/07/ghosts-spirits-and-thailands-award-winning-film-director/">
						Thailand's ghost-friendly director
					</a>
				</li><li>
					<a href="/2010/07/muslim-clerics-star-on-tv-reality-show/">
						Muslim clerics star on TV reality show
					</a>
				</li>
			</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Style</h3>
			<ul>
				<li>
					<a href="/2010/07/are-classic-cars-dead-as-history-repeats-itself/">
						Are classic cars dead?
					</a>
				</li><li>
					<a href="/2010/07/antiques-and-boutiques-in-istanbuls-chic-cihangir-district/">
						Istanbul's chic Cihangir district
					</a>
				</li><li>
					<a href="/2010/07/honeymoon-tester-is-latest-dream-job/">
						Honeymoon tester
					</a>
				</li><li>
					<a href="/2010/07/at-93-louvre-pyramid-architect-i-m-pei-is-still-going-strong/">
						Louvre Pyramid architect I.M. Pei At 93
					</a>
				</li><li>
					<a href="/2010/07/backpacks-among-the-briefcases/">
						Backpacks Among the Briefcases
					</a>
				</li>
			</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Autos</h3>
			<ul>
				<li>
					<a href="/2010/08/is-the-chevy-volt-worth-the-money/">
						Is the Chevy Volt Worth the Money?
					</a>
				</li><li>
					<a href="/2010/08/the-356-a-porsche-to-appreciate/">
						The 356, a Porsche to Appreciate
					</a>
				</li><li>
					<a href="/2010/08/superbrakes-for-civilians-the-cost-is-the-obstacle/">
						Superbrakes for civilians cars?
					</a>
				</li><li>
					<a href="/2010/08/most-made-in-u-s-a-cars-are-japanese/">
						Most 'made in U.S.A.' cars are Japanese
					</a>
				</li><li>
					<a href="/2010/07/are-classic-cars-dead-as-history-repeats-itself/">
						Are classic cars dead?
					</a>
				</li>
			</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Opinion</h3>
			<ul>
				<li>
					<a href="/2010/08/357/">
						Eight Million Bodies in the Naked City
					</a>
				</li><li>
					<a href="/2010/08/mad-men-and-bad-girls/">
						Mad Men and Bad Girls
					</a>
				</li><li>
					<a href="/2010/08/china-closer-to-becoming-second-largest-economy/">
						Is China second-largest economy?
					</a>
				</li><li>
					<a href="/2010/07/analysis-groundhog-day-for-mideast-peace-process/">
						&#8216;Groundhog Day&#8217; for MidEast peace process
					</a>
				</li><li>
					<a href="/2010/07/my-old-kentucky-zombies/">
						My Old Kentucky Zombies
					</a>
				</li>
  		</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Art</h3>
			<ul>
				<li>
					<a href="/2010/08/tales-from-the-kitchen-of-thailand%e2%80%99s-most-gruesome-baker/">
						Meet the man who bakes body parts
					</a>
				</li><li>
					<a href="/2010/07/whats-behind-the-grin-of-yue-minjun/">
						What's behind the grin of Yue Minjun?
					</a>
				</li><li>
					<a href="/2010/07/at-93-louvre-pyramid-architect-i-m-pei-is-still-going-strong/">
						Louvre Pyramid architect I.M. Pei At 93
					</a>
				</li><li>
					<a href="/2010/07/mike-zwerin-jazz-critic-and-author-is-dead-at-79/">
						Mike Zwerin Dead at 79
					</a>
				</li><li>
					<a href="/2010/07/older-actors-upstage-youth-at-comic-con/">
						Older Actors Upstage Youth at Comic-Con
					</a>
				</li>
			</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Science</h3>
			<ul>
				<li>
					<a href="/2010/08/hints-of-earth-splash-a-saturnian-moon-landscape/">
						Hints of Earth Splash a Titan Landscape
					</a>
				</li><li>
					<a href="/2010/08/cloned-livestock-gain-a-foothold-in-europe/">
						Cloned Livestock Gain a Foothold in Europe
					</a>
				</li><li>
					<a href="/2010/08/translating-stories-of-life-forms-etched-in-stone/">
						Storie of Life Forms Etched in Stone
					</a>
				</li><li>
					<a href="/2010/08/predators-and-prey-and-catching-turtles/">
						Predators and Prey, and Catching Turtles
					</a>
				</li><li>
					<a href="/2010/07/dna-scientist-fishing-for-a-frozen-ark/">
						DNA scientist fishing for a 'frozen ark'
					</a>
				</li>
  		</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>People</h3>
			<ul>
				<li>
					<a href="/2010/08/an-unabashedly-sexy-celebrity-gets-political/">
						Unabashed Sexy Celebrity Gets Political
					</a>
				</li><li>
					<a href="/2010/08/tales-from-the-kitchen-of-thailand%e2%80%99s-most-gruesome-baker/">
						Meet the man who bakes body parts
					</a>
				</li><li>
					<a href="/2010/07/whats-behind-the-grin-of-yue-minjun/">
						What's behind the grin of Yue Minjun?
					</a>
				</li><li>
					<a href="/2010/07/ghosts-spirits-and-thailands-award-winning-film-director/">
						Thailand's ghost-friendly director
					</a>
				</li><li>
					<a href="/2010/07/nicklaus-eyes-golf-as-global-game/">
						Nicklaus eyes golf as global game
					</a>
				</li>
			</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Health</h3>
			<ul>
				<li>
					<a href="/2010/08/hope-against-hepatitis-c/">
						Hope Against Hepatitis C
					</a>
				</li><li>
					<a href="/2010/08/missouri-to-vote-on-health-law/">
						Missouri to Vote on Health Law
					</a>
				</li><li>
					<a href="/2010/07/does-saudi-have-worlds-biggest-amphetamine-habit/">
						Saudi's amphetamine problem
					</a>
				</li><li>
					<a href="/2010/07/my-old-kentucky-zombies/">
						My Old Kentucky Zombies
					</a>
				</li><li>
					<a href="/2010/07/v-a-easing-medical-marijuana-rules/">
						V.A. easing medical marijuana
					</a>
				</li>
  		</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>Travel</h3>
			<ul>
				<li>
					<a href="/2010/08/voluntourism-the-benefits-and-pitfalls-you-need-to-know/">
						Voluntourism: The pros and cons
					</a>
				</li><li>
					<a href="/2010/08/tales-from-the-kitchen-of-thailand%e2%80%99s-most-gruesome-baker/">
						Meet the man who bakes body parts
					</a>
				</li><li>
					<a href="/2010/07/an-eco-friendly-family-adventure-across-the-world/">
						Family's green world trip
					</a>
				</li><li>
					<a href="/2010/07/honeymoon-tester-is-latest-dream-job/">
						Honeymoon tester
					</a>
				</li><li>
					<a href="/2010/07/dutch-court-clears-way-for-young-sailor%e2%80%99s-solo-trip/">
						Dutch Court for Young Sailor&#8217;s Solo Trip
					</a>
				</li>
  		</ul>
		<!-- .subSection --></div>
		
	<!-- #newsCategories --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Throwing about 6k of your markup on the ground and stomping on it like a weasel. That provides MORE than enough CSS hooks for the styling you were applying without resorting to some trash ‘framework’ like grid…

But really, the menu by design is going to break cross-os cross-browser, so that needs to be rethought – and any attempts to make sure your content stays on just one line or renders identical is an exercise in futility, and runs entirely contrary to accessibility. (since fonts on content areas should NEVER be declared in a fixed metric (px))

For Paul O’B

Hi, thanks man for the idea. I will try it, it seems to work :slight_smile:
I never think this before as I want my menu looks equal each element.

For Stevie D

Yes you are right, there is a good article about font for this http://is.gd/ewTRZ

Hi,

For your top nav you have added padding 9px left and right to the nav elements and along with the size and amount of the text you have made the nav just happen to fit.

As pointed out already any slight difference in a browsers rendering of the font-size will result in the text moving to the next line.

What you could do instead is remove the 9px left and right padding from each anchor element and size the top nav anchor elements in pixels so that they all fit exactly into the width of the total nav. Then just center the text within each element.

Add a class to each of the top row nav elements so that you can apply a different width to each. That will give you 18px leeway on each element and soak up all browser differences and allow the text at least 2 or 3 levels of text-zoom without breaking.

To be fully safe the width should be in ems and the nav sized in ems to allow it to grow.

So, I have to change my menu and its body? it will change the main layout because I’m using Grid System 960.gs

This non consistency of browser is really painful.

Diferent Browsers have different default font sizes. 'font-size: 67%;" is NOT always going to be = /* 12px */. unless you start with something like… HTML {font-size:18px;}. I also know you may have little choice in the matter, but your menu is long. Some older browsers enlarge the FONT when they zoom, that too would break your layout. you may want to think about that , and opt for a layout “breaks” gracefully rather than trying to force it.