スマホファースト時代の文字セット作ってみた。
📱現在のウェブサイトのほとんどがスマホで見られてる。
その中で重要な文字の設定。
一昔前はPCの本文12pxだったのが、14pxになり、今はさらに大きい16pxほどのサイトも多数。ちなみにnoteはPC 18px / SP 16px。
ただ、記事系で使う本文と、LPやコーポレートサイトなど一般的なウェブサイトで使用する本文サイズは同じにできないのも悩みどころ。そこで色々対応できる文字セットを作ることにしました。
🤔 最初はAi or XDで作っていたけど...
いつも悩むのがデザインと実装の差。デザインソフトと実装では文字詰めも違うし、ボディサイズも違うし、色々な設定にズレが出る。なら最初からHTMLで作ろうという感じ。
🎉 で、できたテンプレがこれ↓（OGが見にくいのは勘弁）
■テンプレURL
https://17design.jp/template/
※metaやOGなどは未設定
■使用フォント
日本語：Noto Sans JP
英語：Work Sans
■特徴
❶ ts_1〜ts_6の六種類（+Bold）で構成。
❷ line-height , letter-spacingは文字サイズによって微調整。
❸ 基本は両端揃えを使いたいが、見出しに英語が入るとやっかいなことになるので、文字が大きい ts_1 / ts_2は両端を解除して左揃えに。
📌 重要視したところ
●案件の契約に関わらないよう無料のウェブフォントを使用すること。
※Adobe fontsはCC契約が必要なので今回は不使用。
●PC/SP、どの端末でも同じフォントで見えること。
※游ゴシック使用したいけどAndroidに入ってないので断念。
●同じ書体でも文字が大きいと文字間 / 行間が広くなるのを調整すること。
●日本語と英語のフォントは別のものを使用すること。
※日本語フォントの英数はかわいくないものが多いので。
●本文は大きめと小さめで複数サイズ製作しておくこと。
●2カラムも準備しておくこと。
🌵 今後調整していきたいところ
●英語フォントが一回り小さくなるので別々で調整したい（たぶんcssだけではできない）
●とりあえずpxで指定しているのを、remかvwとかでもっとすっきりさせたい。
●左右マージンを減らして、画面いっぱいの印象を与えるバージョンも作っておきたい。
てな感じで日々ブラッシュアップしていかないとです。
（スマホ2カラムはそろそろ限界を向かえそう）
この記事が気に入ったらサポートをしてみませんか？