デザインとコーディングでWebフォントの太さを一致させる(Noto Sans JP編)

デザインで指定した文字の太さが、コーディングでは微妙に違う状態で上がってくること、ありますよね。

PhotoshopやIllustratorとコーディングでの文字の太さの指定方法が違うため、せっかくWebフォントを使っても仕上がりが一致しないということがおこります。

コーディングの指示で、font-weightまで指定するつもりでの自分用メモ。
Photoshopから書き出した画像とデバイスフォントを比較するため併記します。パソコンで閲覧専用です。

Noto Sans JP Thin = 100

▼Photoshop

Photoshop → Noto Sans JP Thin/フォントサイズ 16pt/行送り 32pt

▼Coding

Coding → font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 100;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Light = 300

▼Photoshop

Noto Sans JP Light/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 300;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Regular = 400

▼Photoshop

Noto Sans JP Regular/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 400;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Medium = 500

▼Photoshop

Noto Sans JP Medium/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 500;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Bold = 700

▼Photoshop

Noto Sans JP Bold/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 700;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Noto Sans JP Black = 900

▼Photoshop

Noto Sans JP Black/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 900;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

 

指示用コピペテキスト

 

 

Noto Sans JP に限って言えば、公式サイトの一覧状態でプルダウンをクリックしたときだけFont-weightとの対比が数値で確認できるのですが、ちょっとつかいづらいかな。クリックしてるときしか見られないからね…。

せっかくの美しいフォント、デザイナーさんの感覚、大切にするためにディレクターは文字の太さもしっかりあわせましょう!!

 

▼Google Fonts 「Noto Sans JP 」はこちらから!https://fonts.google.com/specimen/Noto+Sans+JP