Font in Chrome is too fuzzy - how can I fix this? - html

Question

I am using font Segoe UI and in a particular section on the site, the font is very blurred in Google Chrome.
I am also uploading the live site: http://impressivefirm.com/dynamics365
Below are the images for comparison:
Chrome
Firefox

Answer 1

I don't think this has anything to do with the selected font, although there might be fonts that don't exhibit this bug. Have a look at Woodrow's answer on a similar question.
In short, the problem's root is the fact you are skewing and translating twice in order to get the hex shape .
From a specific technical point of view, I think you'll only get a clear answer from someone with intimate knowledge on how Chrome's rendering engine works and specifically how anti-aliasing is applied to text.
What's notable is that it's a rendering engine with a fairly large usage, powering Chrome, Android Browser and Opera. I believe you're roughly looking at 60 - 70% of internet users.
Looking for a practical solution, you can get around your problem by having two separate containers, one on top of each other: one containing the background of the hex, without any contents (applying the correct shape) and one transparent, not rotated or skewed at all, with the actual text. This will bring you the disadvantage of having rectangular links when you probably want hexagonal links.
The second solution, and what I believe it's the proper way to make a hex grid is the clip-path technique, combined with proper margins alignment and possibly doable with flexbox.
Edit:
Here is a trimmed down and simplified version of your example, using clip-path. I tried to keep mods to your initial CSS to a minimum and only removed what was breaking my example. Here's what I did:
removed the skews
fixed responsiveness (paddings, widths and heights - you'll probably want to adjust font sizes line heights and other details yourself)
tried to keep as much as your existing markup and CSS
removed what was breaking responsiveness and simplified a few overly-complex solutions - at least from my perspective
I haven't used any tool to calculate angles. If you want them geometrically perfect you'll want to measure them and fine-tune heights
as a general rule, I tried to demonstrating a principle, not to provide a production ready version - you'll probably need to fine-tune the details
note this technique allows for perfect control over the link areas. Clickable areas are hexagonal and the space between hexagons is not linked.
#import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
body {font-family: 'Noto Sans', sans-serif;background-color: #369;}
#hexGrid {
display: flex;
flex-wrap: wrap;
max-width: 840px;
margin: 0 auto;
overflow: hidden;
font-size: 1.1066819197003217rem;
line-height: 1.5rem;
list-style-type: none;
padding: 48px 0;
}
.hex {
position: relative;
outline: 1px solid transparent;
-webkit-clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
background-color: white;
margin-bottom: -7vw;
box-sizing: border-box;
height: 33vw;
}
#media (min-width: 680px) {
.hex {
height: 224px;
margin-bottom: -48px;
}
}
#media (max-width: 600px) {
.hex {
height: 50vw;
margin-bottom: -10.8vw;
}
}
.hex::after {
content: '';
display: block;
padding-bottom: 86.602%;
/* = 100 / tan(60) * 1.5 */
}
.hexIn {
position: absolute;
width: 96%;
margin: 0 2%;
height: 100%;
}
.hexIn * {
position: absolute;
visibility: visible;
}
.hexLink {
display: block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
border: none;
}
/*** HEX CONTENT **********************************************************************/
.hex h1, .hex p, .hex .icon {
width: 100%;
box-sizing: border-box;
color: #000;
font-weight: 300;
}
.hex .icon {
height: 48px !important;
top: 45%;
display: block;
z-index: 2;
transform: translate3d(0,-100%,0);
}
.hex p {
top: 60%;
z-index: 1;
transform: translate3d(0,-100%,0);
}
.hex h1 {
top: 27%;
transform: translate3d(0,100%,0);
font-size: 20px !important;
letter-spacing: 1px;
}
/*** HOVER EFFECT **********************************************************************/
/*
*.hexLink:hover h1, .hexLink:focus h1,
*.hexLink:hover p, .hexLink:focus p{
* -webkit-transform:translate3d(0,0,0);
* -ms-transform:translate3d(0,0,0);
* transform:translate3d(0,0,0);
*}
*
*/
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
#media (min-width:1201px) {
/* <- 5-4 hexagons per row */
#hexGrid {
padding-bottom: 4.4%;
}
.hex {
width: 25%;
/* = 100 / 5 */
}
.hex:nth-child(7n+5) {
/* first hexagon of even rows */
margin-left: 12.5%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 1200px) and (min-width:901px) {
/* <- 4-3 hexagons per row */
#hexGrid {
padding-bottom: 5.5%;
}
.hex {
width: 25%;
/* = 100 / 4 */
}
.hex:nth-child(7n+5) {
/* first hexagon of even rows */
margin-left: 12.5%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 900px) and (min-width:601px) {
/* <- 3-2 hexagons per row */
#hexGrid {
padding-bottom: 7.4%;
max-width: 640px;
}
.hex {
width: 33.333%;
/* = 100 / 3 */
}
.hex:nth-child(5n+4) {
/* first hexagon of even rows */
margin-left: 16.666%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 600px) {
/* <- 2-1 hexagons per row */
#hexGrid {
padding-bottom: 11.2%;
}
.hex {
width: 50%;
/* = 100 / 3 */
}
.hex:nth-child(3n+3) {
/* first hexagon of even rows */
margin-left: 25%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}
<ul id="hexGrid">
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/sales" target="_blank">
<div class="filler"></div>
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#strengthandscale"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Sales</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/customer-service" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#customer-service"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Customer Service</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/operations" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#operations"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Operations</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/financials" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#financials"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Financials</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/field-service" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#field-service"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Field Service</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/project-service-automation" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#project-service"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Project Service</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/marketing" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#marketing"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Marketing</h1>
</a>
</div>
</li>
</ul>
Side notes:
I'm not exactly a fan of responsiveness by percent padding, so I removed part of it, as it was really messing up responsiveness.
from where I see it, your markup and CSS are unnecessarily complex and that's the root of the problem. CSS should be kept as simple and controllable as possible.

Answer 2

I resolved the issue by going in Chrome to SETTINGS>>>ADVANCED>>>SYSTEM and turned off/disabled "Use Hardware Acceleration When Possible". I've seen this type of error before in the XP era - related to certain graphic driver/updates - which affected Adobe reader/full products. Remove the drivers (version translation) component specific to the browser and and the apps will default to the OS settings.