pachamaltese pachamaltese - 3 months ago 10
CSS Question

How to obtain nice font smooting? (and how to mimic Medium.com font styles?)

I did buy Charter and Kievit for my website.

The fonts are ok and are the same used by Medium.com

I use Jekyll and the smoothing is ok in most browsers but Safari.

How can I obtain a font rendering that is closer to Medium.com. Their website has settled a landmark for web fonts.

This is how my website looks:
enter image description here

And this is how Medium.com looks:
enter image description here

I detect that my website fonts are more wider, more shorter and more thicker/blurry.

This is a part of my file `fonts.css``

@font-face {
font-family: 'Charter';
font-weight: normal;
font-style: normal;
src: url('../fonts/charter.eot');
src: url('../fonts/charter.eot?#iefix') format('embedded-opentype'),
url('../fonts/charter.woff2') format('woff2'),
url('../fonts/charter.woff') format('woff'),
url('../fonts/charter.ttf') format('truetype');
}

@font-face{
font-family: 'Kievit';
font-weight: normal;
font-style: normal;
src:url('../fonts/kievit.eot?#iefix');
src:url('../fonts/kievit.eot?#iefix') format('eot'),
url('../fonts/kievit.woff2') format('woff2'),
url('../fonts/kievit.woff') format('woff'),
url('../fonts/kievit.ttf') format('truetype');
}


Best regards,

Answer

Have you inspected the elements from Medium.com? Inspecting the H3 of the title of the blog you've shared via Chrome Developer Tools, shows the following ccs rendered styles

-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: medium-content-sans-serif-font, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Arial, sans-serif;
font-size: 32px;
font-style: normal;
font-weight: bold;
height: 36px;
letter-spacing: -0.64px;
line-height: 36.8px;
margin-bottom: 0px;
margin-left: -2px;
margin-right: 0px;
margin-top: 39px;
visibility: visible;
width: 702px;
word-wrap: break-word;