タイポグラフィ
はじめに
ウェブサイトのタイポグラフィは印刷物と比較すると閲覧側の環境依存があるため制作側の意図が反映されにくいものです。
この文章もmacOSのChromeブラウザでは一行35文字ですがsafariでは37文字、iPhone miniは21文字と変化します。OSやブラウザが異なるだけでも同じ表示はできません。その上で閲覧する環境での可読性（読みやすさ）を考慮した各種設定を行うことが大事です。
印刷物同様にフォント種／サイズ／行間／行揃えが基本となり、見出しの修飾や一行あたりの文字数設計も重要です。
設定可能項目が豊富なことから以降は主にブロックエディタ Gutentor で作成したサンプルを用意しました。
プラグイン名：Gutentor
ブロック名：Advanced Text
主な設定：Font Size 16px／Line Height 1.8／Justify／Width 560px／Alignment center
概要：上記本文の書式設定。行揃えジャスティファイ。行あたりの文字数を35文字前後にするため文字ボックスの幅をPCとタブレットで560pxとした。幅設定をしないスマホ横向き閲覧では40文字以上になるが利用者の利便性を考えそのままとする。
文字詰め設定例
夏目漱石 坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
プラグイン名：Gutentor
ブロック名：Advanced Text
主な設定：Noto Sans JP／Font Size 16px／Line Height 1.8／Justify／Width 560px／Alignment center
概要：対応書体は限定されるが、OpenTypeフォントオプションのプロポーショナルメトリクスを使い文字詰め。句読点ひらがなカタカナが自動カーニングされる。
.tsume {
font-feature-settings: "palt" 1;
}文字に対するデザイン設定例
Sample 01
あなたと
世界を
変えていく。
プラグイン名：Gutentor
ブロック名：Advanced Text
主な設定：Google Fonts Noto Selif JP／40px／Weight 700／Italic／Line Height 1／Color Crimson
概要：標準で利用できるGoogleフォントを使用し斜体と太字を設定し行間を詰めた。
あなたと
世界を
変えていく。
プラグイン名：Gutentor
ブロック名：Advanced Text
主な設定：ヒラギノ明朝 ProN 游明朝体／40px／Weight 700／Italic／Line Height 1／Color Crimson
概要：OpenTypeの自動文字詰めをアクティブにした。
.tsume {
font-feature-settings: "palt" 1;
}Sample 02
ウェブサイトの
常識を変えていく。
プラグイン名：Gutentor
ブロック名：Advanced Text
主な設定：Google Fonts Zen Kaku Gothic New／Width 370px／40px／Weight 700／Italic／Line Height 1
概要：標準書体では無いGoogle Fonts を使用するためheadタグ内に @import でWEBフォントをロードし、テキストブロックに書体指定のための追加CSSを適用。
<style> @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@900&display=swap'); </style>.zen {
font-family: 'Zen Kaku Gothic New', sans-serif;
}Sample 03
あなたと環境を変えていく。
プラグイン名：なし
ブロック名：縦書き
主な設定：24px／中央揃え
概要：テーマLuxeritas標準装備の縦書きブロックを使用。
Sample 04
あなたと世界を変えていく。
プラグイン名：Gutentor
ブロック名：Container ／ Advanced Text
主な設定：Google Fonts Reggae One／20px／Weight 700／Box Shadow
概要：コンテナブロックをPosition Rerative Width 600pxと設定し、skewで斜体化し格納するテキストブロックをさらにskewで正体に戻した。下記CSS参照。
.naname {
transform: skew(-10deg);
}
.modosu {
transform: skew(10deg);
}まとめ
いくつかのサンプルを紹介しました。ウェブでのタイポグラフィも進化を続けており細かな設定が可能となっています。
他記事からテキストブロックをコピペして利用したり、基準となるブロックを再利用ブロックで登録し呼び出したり、他のブロックからスタイルのみをコピペし適用するなど、運用が楽になる機能も多いのでご活用を。
macOS、Windows、iOS、Androidで共通する和文標準フォントが無いのはちょっとツライところですがね（笑）