I’m trying to iron out a few minor bugs on a new site and just found this one. On my display (2011 Macbook Air), certain text such as the logo and sublogo text appear crisp and thin:
However, on my girlfriend’s 2013 Macbook Air, it displays thicker like so.
(Other text also has a similar problem.) Why might this be happening? Thanks!
The problem is at http://comparewear.com
This is likely not a problem but a result of the font stack you are using and what fonts are available on each computer.
What is the font stack?
It’s a Google font.<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" type="text/css">
Off the cuff, it is possible that between the time your MacAir was build and your girlfriend’s was build, that Apple changed the way it renders fonts. If comparison is of any value, Firefox changed the way it handles fonts slightly (kearning in particular) about that same time, so it’s possible they were following Apple’s lead.
It seems that the width of this page is designed with a narrow margin of error for the watch boxes. I see rows of 6 watches when I run the page on my PC and rows of 5 when run from the server. Threre are 9px between watch boxes, from my PC, I see 7px. Delete #main {font-size:2rem} to fix that difference. Yep, that’s it. FWIW.
OFF TOPIC:
Valid code; it starts with a real doctype. Sometimes three or four simple changes to a repeated pattern can make the difference between 61 reported “errors” and 0.
comparewear1a.html (27.0 KB)
signed, Smarty Pants.
As @ronpat says, font rendering differs from one machine to another, and from one browser to another, so don’t base your layouts on font rendering, as it’s too unreliable.
@ronpat Thank you. How is it now?
@ralphm It’s not so much the layout as the smoothing and weight. Something looks off. We’re both using the same OS, browser, and computer model.
Columns are awesome, 6 across.
Validation errors are still unecessarily excessive (compared to zero), but I guess we have our priorities.
You should have used the code that I sent. It couldn’t have been more than an hour old. Oh, well.
@ronpat I used a couple lines of your code that I saw were new, but you were editing a static page, and this is a very complicated PHP script. How are you seeing the errors? I am not getting any.
You have to read/validate the source from a browser to see the errors.
Do you know what your girlfriend’s computer uses as its default font and font-size? Wondering if it might be different from yours.
validation “errors”
I use the Firefox browser with the HTML validator plug-in.
How do I do it? I look at the HTML source and read the validator.
It sounds like you would have to change the PHP code that generates the page pieces. It’s small potatoes stuff. Mostly cut and paste, but not all.
Line 43:
<span id="sublogo"...
needs a closing </span> at the end of the line.
Line 46
<a id="bar-facebook...> This line contains a URL; Replace the ampersand after comparewear.com with %26
...comparewear.com%26redirect_uri...
Line 49
<a id="bar-mail..." This line contains another URL. Replace the question mark, space, and ampersand as follows:
...mailto:%3Fsubject=Compare%20Wearables%26body=...
Lines 64+
Within these three divisions only
<ul class="products" id="Smartwatches"> and
<ul class="products" id="FitnessBands"> and
<ul class="products" id="OtherActivityTrackers">
Change the div to span (31 instances found)
<div class="product-info"> change to <span class="product-info">, etc., AND
Add .products {display:block;} to the .products CSS
Lines 426+
Tags cannot have two class attributes: (9 instances found)
...class="like-products" class="PopularComparisons">
must be written
...class="like-products PopularComparisons">
Almost at the bottom:
The end of line tag is an open tag. Change it to a closing </div> tag.
<div id="footer2">CompareWear.com © 2015 Jason E. Siegel<div>
It seems like I am overlooking a stray close </div> tag. But maybe not. If you make any of these changes, let me know and I’ll look again.
Cheers
Thanks. This was helpful. The only one I didn’t understand is why you wanted me to change the DIVs to SPANs.
Because a <div> is not allowed inside a <label> tag. One does not put a block object inside of an inline object. HTML5 allows an exception with the <a> tag, but browsers are still having adjustment pains.
I just meant that if the text is fatter in some contexts, it might, for example, wrap to another line, which would affect inflexible layouts with set heights etc. Sounded like that was part of your issue.
Haha. I’ll fix that today.
Regarding the font, it’s the weight that’s the cause for concern. Or more specifically, the crispness of the text. Assuming it’s not computer display settings, could it be the website in any way?
Fixed. Happy? 
Very well done! You have just earned yourself and your site a very large measure of respect from anyone who looks under the hood of your site to see what the author is made of… serious or fly-by-night. Even coders who downplay the usefulness of the HTML validator respect conscientiousness and attention to detail. Give yourself a gold star!
In perspective:
The HTML validator is a tool that flags known errors and flags as an error code that it does not recognize. Eventually, you may add a plug-in or IE-proprietary code (ugh) to a site which introduces code that is flagged as an error even though it does not adversely affect the site. “Errors” such as these must be discounted as “invalid errors”. Use the validator to help write good, sound code because such code affords the best likelihood of cross-browser compatibility. But don’t lose sleep over “non-errors” flagged as “errors”. Even 100% “valid” code may not render as desired, if at all.
Again, very well done!
I am inclined to think it is not the web site.
The Windows operating system has a setting that most users are probably unaware of that affects the way screen fonts are rendered. One can select “ClearType” or “Standard”. “ClearType” looks smoother. Perhaps the Mac has a similarly obscure setting that is different on her Mac.
I see exactly what you see, what your screen shots show which is why I believe the difference is in her Mac, not the web site. Perhaps her newer Mac is better able to render the enhanced fonts that carry the 200,300,400,… font weight settings instead of just normal and bold. I’m just guessing. I think @ralphm and @PaulOB are both Mac owners and probably have better information.
Mac often shows distinct differences in font rendering from one browser to another, and the new retina screens introduce another factor into the mix. As with all aspects of web design, trying to get things to look the same in every browser on every machine is a vain endeavor.
Okay thanks.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
