Switching from Floats to Flexbox - font issue

Hi there,

The font shouldn't change at all.

Where can we see the issue?

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

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

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.

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;
}

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

Sorry I missed the font issue before!

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

No problem, Leo.

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

Thanks.

Edit your CSS to this:

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

Perfect, thank you :)

No problem :)