ウェブ

約物半角専用のWebフォント「Yaku han JP」記号の字詰めを整える【Web Font】

Yaku han JP

デザイナーにとって一番難しいとされる「文字詰め」かなり気を使い調整します。

Photoshopやillustratorで作るグラフィックものは、カーニングなどで微調整することが出来ますが、Webサイトでは一つ一つの文字や記号に対して文字詰めをしていてはきりがありません。

そこで、約物半角専用Yaku Han JPを導入するだけで半角記号が詰めを自動でしてくれます。

▪「Yaku Han JP」実装例⇩

約物半角・未実装
約物半角・未実装
約物半角・実装
約物半角・実装

記号の「、。)」の感覚が詰められるいることが確認できます。

デザイナーとして文字詰めは意識したい部分になるので、約物半角専用Yaku Han JPの実装をおすすめします。

約物半角「Yaku han JP」実装方法

下記URLより実装するためのCDNで読み込む方法ができます。

➡ Yaku Han JP

約物半角専用のサイト
約物半角専用のサイト

Simulatorの項目にHiraginoNoto sans JPのフォント選択があります。

フォントNotoのGothic
フォントNotoのGothic

書体について

  • Gothic 「ゴシック体」 : Noto Sans
  • Mincho 「明朝体」 : Serif
  • Round 「丸ゴシック」 : Rounded M+

▪実装している記述コードを下記に記述しました⇩

当サイトはNoto Sans JPを使用しているのでGooglefontの直下に約物半角専用フォントCDN記述。

選択項目はGothicAllNotoになります。

HTML

<head></head>のタグ内に記述します。

<!-- Googlefont Noto Sans JP -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

<!-- YakuHanJPs all 約物半角専用フォント-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp-noto.min.css">

CSS

/* CSS:font-familyを設定 */
body#nts-style {
	font-family: "YakuHanJP_Noto", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

※cssのクラス名は各々のサイトで適用したい箇所のクラス名に変更が必要です。

注意点

VSCodeでの記述内容確認。

サイトからコピーペーストした際に、ダブルクォーテーションが入っていない場合があり、そのまま記述すると、ダブルクォーテーションで囲われていない白色になっているYakuHanJP_NotoMeiryoは反映されないので、ダブルクォーテーションで囲って記述しましょう。

VSCodeで確認
VSCodeで確認

含める記号

記号「すべて」か「カッコのみ」かに含める約物を選別できます。

YakuHanJP
ゴシック体
(約物すべて)
、。!?〈〉《》「」『』【】〔〕・():;[]{}
YakuHanJPs
ゴシック体
(カッコのみ)
〈〉《》「」『』【】〔〕()[]{}
YakuHanMP
明朝体
(約物すべて)
、。!?《》「」『』【】〔〕・():;[]{}
YakuHanMPs
明朝体
(カッコのみ)
《》「」『』【】〔〕()[]{}
YakuHanRP
丸ゴシック
(約物すべて)
、。!?〈〉《》「」『』【】〔〕・():;[]{}
YakuHanRPs
丸ゴシック
(カッコのみ)
〈〉《》「」『』【】〔〕()[]{}
含まれる記号一覧

GitHubにダウンロード版もあり

➡ GitHub-Yaku Han JP

Yaku Han JP-GitHub
Yaku Han JP-GitHub
ダウンロード
ダウンロード

CSSフォルダにはFull版のyakuhanjp.min.cssとSmall版のyakuhanjp_s.min.cssがあるので、利用したい方だけFTPでファイルアップロードします。

▪Full版⇩

/* Full版Include Fonts */
、。!?〈〉《》「」『』【】〔〕・():;[]{}…

▪Small版⇩

/* Small版Include Fonts */
〈〉《》「」『』【】〔〕()[]{}…

▪デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~
デザインはセンス、経験、一切不要!で基礎力を身につけることが出来る本です。 センスより読み手に伝わるデザイン、心に残るデザイン、読みやすいデザインを制作するのにもっとも大切なものが詰まっています。

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業
デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業

▪けっきょく、よはく。 余白を活かしたデザインレイアウトの本
シャレなデザインは読みやすく情報が整理され、余白をうまく使いこなしています。「余白を作ること」を意識すれば誰でも今より一歩垢抜けた、オシャレなデザインができます。そんな余白に注目したデザインレイアウトの本です。

けっきょく、よはく。 余白を活かしたデザインレイアウトの本
book
created by Rinker
¥1,980 (2022/10/04 08:57:14時点 楽天市場調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA