[Resolved] Switching from Floats to Flexbox – font issue

[Gianluca]

Hi,

I’m switching all my sites from the Float option to Flexbox, but I’ve noticed an issue with the font used, which seems to be thinner and lighter than before.

Is it normal? Is it possible to keep the font as it used to be?

Thank you in advance,

Gianluca

[Leo]

Hi there,

The font shouldn’t change at all.

Where can we see the issue?

[Gianluca]

Hi Leo,

you can have a look at this site https://www.gianlucaorlandi.io/ which has Flexbox activated and this one https://www.viaggiaregratis.eu/ which has Floats.

The font used is the same, but in the first website it looks thinner and lighter.

I’m using Chrome.

Thank you

[Leo]

Just tested with Chrome and not seeing any difference at all:
https://www.screencast.com/t/8vV4ifTIv
https://www.screencast.com/t/6vRt3vU8nxn

[Gianluca]

Flexbox https://imgur.com/a/3ZGfJLA

Floats https://imgur.com/a/1GVqFcA

Try to zoom the pictures, the difference is minimal but in Floats the font seems thicker.

[David]

Hi there,

GP 3.0 introduced this CSS:

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Which is why the typography is ‘finer’.

If you can unset that with CSS:

html {
    -webkit-font-smoothing: unset;
    -moz-osx-font-smoothing: unset;
}

[Gianluca]

Hi David,

It worked, thank you!

Another issue I’ve noticed with the switch, is related to the hr tag.

I’ve styled it with this CSS:

/* hr tag - Horizontal line style */
hr {
  background-color: #a0d468;
  width: 20%;
  height: 2px;
}

to show the horizontal line in the center of the page, but with Flexbox the line is pushed to the left as you can see here https://imgur.com/a/ATeDIg4

Is there a way to center the hr tag with some CSS?

Thank you in advance

[Leo]

Sorry I missed the font issue before!

Can you link me to the page where I can see the hr tag issue?

[Gianluca]

No problem, Leo.

Here’s the page https://www.gianlucaorlandi.io/libri

Thanks.

[Leo]

Edit your CSS to this:

hr {
  background-color: #a0d468;
  width: 20%;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
}

[Gianluca]

Perfect, thank you 🙂

[Leo]

No problem 🙂

[Author]

Posts