デザイナーにとって一番難しいとされる「文字詰め」かなり気を使い調整します。
Photoshopやillustratorで作るグラフィックものは、カーニングなどで微調整することが出来ますが、Webサイトでは一つ一つの文字や記号に対して文字詰めをしていてはきりがありません。
そこで、約物半角専用Yaku Han JPを導入するだけで半角記号が詰めを自動でしてくれます。
▪「Yaku Han JP」実装例⇩
記号の「、。）」の感覚が詰められるいることが確認できます。
デザイナーとして文字詰めは意識したい部分になるので、約物半角専用Yaku Han JPの実装をおすすめします。
約物半角「Yaku han JP」実装方法
下記URLより実装するためのCDNで読み込む方法ができます。
Simulatorの項目にHiraginoやNoto sans JPのフォント選択があります。
書体について
- Gothic 「ゴシック体」 ： Noto Sans
- Mincho 「明朝体」 ： Serif
- Round 「丸ゴシック」 ： Rounded M+
▪実装している記述コードを下記に記述しました⇩
当サイトはNoto Sans JPを使用しているのでGooglefontの直下に約物半角専用フォントCDN記述。
選択項目はGothic・All・Notoになります。
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_NotoとMeiryoは反映されないので、ダブルクォーテーションで囲って記述しましょう。
含める記号
記号「すべて」か「カッコのみ」かに含める約物を選別できます。
| YakuHanJP ゴシック体 （約物すべて） | 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ |
| YakuHanJPs ゴシック体 （カッコのみ） | 〈〉《》「」『』【】〔〕（）［］｛｝ |
| YakuHanMP 明朝体 （約物すべて） | 、。！？《》「」『』【】〔〕・（）：；［］｛｝ |
| YakuHanMPs 明朝体 （カッコのみ） | 《》「」『』【】〔〕（）［］｛｝ |
| YakuHanRP 丸ゴシック （約物すべて） | 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ |
| YakuHanRPs 丸ゴシック （カッコのみ） | 〈〉《》「」『』【】〔〕（）［］｛｝ |
GitHubにダウンロード版もあり
CSSフォルダにはFull版のyakuhanjp.min.cssとSmall版のyakuhanjp_s.min.cssがあるので、利用したい方だけFTPでファイルアップロードします。
▪Full版⇩
/* Full版Include Fonts */
、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝…▪Small版⇩
/* Small版Include Fonts */
〈〉《》「」『』【】〔〕（）［］｛｝…Yaku han JPについて
「Yaku Han JP」は、デザイナーの柴田文江氏によって作成されたオープンソースのWebフォントです。このフォントは、日本の書体デザインにインスパイアされており、視認性の高い文字形状や独自のデザイン要素を特徴としています。
「Yaku Han JP」は、多くの重み（ウェイト）とスタイル（Regular、Bold、Italicなど）で提供されています。これにより、異なるテキストの強調やデザインのニーズに合わせて適切なスタイルを選択することができます。
![【原神】刻晴超開花パーティ 夜蘭蒸発パーティ 深境螺旋12層攻略 Genshin Impact [4K] (げんしん)](https://design-pull.com/wp-content/uploads/2022/12/gensinabyssal_spiral12_20221126-320x180.jpg)
