素敵なフォントの笑顔を得るには？ （そしてMedium.comのフォントスタイルを模倣する方法）

Question

私は自分のウェブサイトでCharterとKievitを購入しました。

フォントは大丈夫です、私はジキルを使用してスムージングは​​、ほとんどのブラウザが、SafariでokですMedium.com

が使用するのと同じです。

Medium.comに近いフォントレンダリングはどのようにして取得できますか？彼らのウェブサイトはウェブフォントのランドマークを解決している。

そして、これはMedium.comがどのように見えるかです：：

これは私のウェブサイトがどのように見えるかです

を、私は私のウェブサイトのフォントはより短く、ぼやけた/より厚く、より広くなっていることを検出します。

これ

は、

@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'); 
} 

敬具fonts.css``私のファイル `の一部である

Answer 1

これはmedium.comタイトルに適用スタイリングの一部です：

font-size: 29px; 
line-height: 1.04; 
letter-spacing: -.028em; 
font-weight: 700; 

記事ヘッダー行：

line-height: 1.5; 
letter-spacing: -.004em; 
font-weight: 400; 

line-height、letter-spacing、font-weight

Answer 2

Medium.comの要素を調べたことがありますか？あなたはChromeデベロッパーツールを経由して共有しているブログのタイトルのH3を検査、以下CCSは

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

スタイルをレンダリング示し