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:
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)
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 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">
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.
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?
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.
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.