プラカンブログ
プラカンブログ

プラカンブログ

便利な約物半角専用フォント

こんにちは、2020年に入社したHARAJIMAです!

今回初めてブログを書きます。

気づいたらもう2022年。1年があっという間でした。

去年も自粛期間が長く外出する機会がだいぶ減ってしまったので、今年は旅行にいけたらいいな~と思っています。

御朱印を集めているので京都の伏見稲荷大社に行くことが目標です!

***

さて今回は私がコーディングをする際に使用している「Yaku Han JP」についてご紹介します。

Web上で約物(括弧や句読点)を使用すると、文字との間隔が空きすぎてなんとなく収まりが悪くないでしょうか。

211224_harajima_img01.JPG

Web上では約物を含め文字が全角になるため文字の間に余計な間隔が空いているように見えてしまいます。

グラフィックデザインであれば文字組みの設定で「約物半角」を使用できますし、1文字1文字調節もできますが、Webだとなかなか難しいですよね。

そこでこの問題を解決してくれるのが「Yaku Han JP」です。

こちらは手軽に使えて約物の間隔を整えてくれるフォントです!

使用方法

条件に併せてカスタマイズ

まず、Yaku Han JPにアクセスをしたら「Simulator」にて使用したいフォントを選びます。

ウェイトや文字サイズ、ダークモードもここで確認ができるのでとても便利です!

211224_harajima_img02.JPG

htmlとcssに貼り付け

フォントの種類を選択するとlinkタグとexampleのプロパティの中身が条件に合わせて変化します。

それぞれhtmlのhead内と、cssのフォントを適用させたい箇所にコピペをすれば完了です!

ポイントは、cssに貼り付ける際、font-familyでYakuhan●●を一番先頭にすることです。

211224_harajima_img03.JPG

約物の間隔がキュッと詰まり、見やすくなったと思います!

今回の例では全ての約物が対象となっていますが、Simulatorの「Small」を選択すると括弧のみに適用させることも可能です。

フォントの種類もゴシック体、明朝体、丸ゴシック体から選ぶことができます。

終わりに

いかがでしたでしょうか。

全てのフォントに適用させることはできませんが、メジャーなフォントはカバーしているので使用できる場面は多いのではないでしょうか。

手軽に使うことができるのはとても嬉しいですよね。

良ければ参考にしてください^^

それでは!

この記事は HARAJIMA が書きました。

プラカン(PLUS DESIGN COMPANY)が目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

    • お客様のご要望、目的の達成
    • ホームページの利便性や満足度の向上
    • ブランドイメージの向上 など
  2. 仕事の進め方に
    満足していただく

    • スケジュール遅延のないスムーズな進行
    • お客様の理解度、知識、経験に応じた親切で分かりやすい進行
    • セキュリティ意識の高い安全な進行管理 など
  3. サポート・フォーローに
    満足していただく

    • 公開後も安心なサーバー保守、CMS保守、コンテンツの保守管理
    • 集客、コンバージョンを強化するためのアクセスログ解析
    • 集客、コンバージョンを強化するためのコンテンツの改善 など

詳しくはWEBコンサルティングをご覧ください

WEBコンサルティング

ホームページに関するご要望がございましたら、お気軽にご相談ください。

Contact Us

お問い合わせをお考えの方

お問い合わせ

Estimate

お見積りをご希望の方

お見積り

お電話でのお問い合わせ