日本語のような半角文字と全角文字が混在する言語は、詳細なサイズ調節が必要となることがあります。
mosir では10段階の通常の文字サイズと、2種類の特殊文字サイズを使用できます。
選択肢のラベルには、実際のピクセル数が付記されています。「XLは何ピクセルだったか」と思い出す必要はなく、デザインの知識が少ない担当者でも適切な文字サイズを選ぶことができます。
実際の文字サイズのサンプルは、下記のデモページを参照ください。
1. 通常の文字サイズ一覧
記載された通りの外観になる文字サイズの一覧です。
文字サイズのラベルは、ウィンドウ幅に対する変動値[1]となっています。最初の2桁が最小（画面幅390px）のピクセル数、後ろの2桁が最大（画面幅1280px）のピクセル数を表しています。
CSSでは rem 単位での設定となっており、 1rem = 16px です。
| サイズ名 | 最小 (px / rem) | 最大 (px / rem) |
|---|---|---|
| XS (10-12) | 10px / 0.625rem | 12px / 0.75rem |
| S (12-14) | 12px / 0.75rem | 14px / 0.875rem |
| M (14-16) デフォルト | 14px / 0.875rem | 16px / 1rem |
| L (16-18) | 16px / 1rem | 18px / 1.125rem |
| XL (18-20) | 18px / 1.125rem | 20px / 1.25rem |
| 2XL (20-24) | 20px / 1.25rem | 24px / 1.5rem |
| 3XL (24-32) | 24px / 1.5rem | 32px / 2rem |
| 4XL (32-40) | 32px / 2rem | 40px / 2.5rem |
| 5XL (40-48) | 40px / 2.5rem | 48px / 3rem |
| 6XL (48-60) | 48px / 3rem | 60px / 3.75rem |
最小値と最大値の関係
「各文字サイズの最大値は、次のレベルの最小値と同じ値になる」という法則があります。つまり 3XL の最大値と 4XL の最小値は、同じ 32px / 2rem となります。
アクセシビリティ
アクセシビリティガイドラインに沿う場合、サイト内の文字サイズは最小でも14pxとすることが望ましいです。このため mosir のデフォルトのCSSでは XS(10-12) は選択肢としてのみ設け、実際のサイト内では使用していません。
2. 特殊文字サイズ一覧
指定した箇所の、親要素の文字からの相対値となる文字サイズの一覧です。インラインスタイルが使用できるプラグインとの併用を前提としています。
| サイズ名 | 理論上の最小 (px / rem) | 理論上の最大 (px / rem) |
|---|---|---|
| em-S (75%) | 7.5px / 0.469rem | 45px / 2.813rem |
| em-L (125%) | 12.5px / 0.781rem | 75px / 4.688rem |
[1]: 変動値はCSSの clamp() 関数を使用して実装しています。オンライン上に多数のジェネレーターがあるので、変更したい場合はそれらを使用して再計算をしてください。