多言語のフォント指定は、言語ごとに引き継ぐ

対象はLato、Montserrat、Noto Sans、Noto Sans JP、Noto Sans Thai、Playfair Display、Poppins、Robotoです。各ファミリーについて、通常のウェイト400と太字の700で、英語、スペイン語、フランス語、ドイツ語、オランダ語、インドネシア語、マレー語、タガログ語、タイ語、日本語の文面を表示しました。1ケースはファミリー・ウェイト・言語の1つの組み合わせで、見出し、説明文、行動を促す文言の3欄を含みます。

最初の版では、第一候補のファミリーの後ろに一般的な代替指定を置きました。Playfair Displayはserif、それ以外の7ファミリーはsans-serifです。このような一般的な指定では、ブラウザが端末にインストールされた適切なフォントを探します。ブランド側が用意した特定のファイルを指定するわけではありません。^[2]

1ファミリーあたり20ケース、合計160ケースです。6ファミリーでは、それぞれ4ケースでインストール済みフォントが使われました。タイ語と日本語の見本文について、両方のウェイトが該当します。Noto Sans JPはタイ語の2ケース、Noto Sans Thaiは日本語の2ケースで、インストール済みフォントを使っていました。ラテン文字で書かれたテストケースはすべて、指定した第一候補のファミリーだけで表示されました。

この数値が示すのは、今回選んだ文とファイルの結果です。特定の文字体系向けの2ファミリーも含め、扱いやすい範囲を意図的に選びました。ブランド向けフォントの代表標本ではなく、各言語で使う可能性があるすべての文字を試したわけでもありません。商品名、通貨記号、後から追加する見出しには、今回の文面にない文字が含まれるかもしれません。

対になる版では、第一候補を先頭に残したまま、同じ一般的な代替指定の前に併用フォントを追加しました。ラテン文字で書かれた8言語の見本文にはNoto Sans、タイ語にはNoto Sans Thai、日本語にはNoto Sans JPを指定しました。第一候補と併用フォントが同じファミリーの場合は、1回だけ記載しています。

この160ケースでは、端末のインストール済みフォントは使われませんでした。28ケースでは、ファイルを固定した併用フォントが、それまでインストール済みフォントの担っていた役割を引き継ぎました。残る132ケースでは、第一候補が引き続き3欄すべてを表示しました。併用指定は元のファイルを拡張するものではありません。ブラウザが使える別のファイルを明確にしたのです。

Latoの例で見ると分かりやすくなります。どちらのウェイトでも、タイ語の見出しは、一般的な代替指定の版ではインストール済みのThonburi、併用フォントを指定した版ではNoto Sans Thaiで表示されました。日本語の見出しはHiragino Kaku Gothic ProNからNoto Sans JPに変わっています。英語とフランス語の例は、引き続きLatoでした。

Playfair Displayの例は、併用フォントの選択が技術だけでなくデザインの判断でもあることを示します。serifを代替指定にした日本語の見出しは、Hiragino Mincho ProNで表示されました。Noto Sans JPを明示すると、サンセリフのファミリーに変わりました。確認したのは、どのファイルが見本文を表示したかです。この組み合わせで意図した雰囲気が保たれたと確かめたわけではありません。

企業はラテン文字用のブランドフォントを残しつつ、別の文字体系に使うフォントを意図的に選べます。クリエイターも、その組み合わせを次の制作物へ引き継げます。大切なのは、その選択を制作指示に残すことです。今回の併用指定は機能上の例であり、あらゆるブランドに合う見た目として推奨するものではありません。

まず、実際に公開する言葉から始めます。見出し、説明文、行動を促す文言に加え、本番のキャンペーンにある商品名、価格などの重要な表記も入れましょう。きれいな文字一覧を見るだけでは、使う場所に実際の言葉を置いて確認したことにはなりません。

次に、言語ごとのファイルとウェイトを指定します。通常の本文と太字の見出しは、それぞれ確認が必要です。今回の実験では、傾きのない通常スタイルのフォントファイル、または可変フォントの軸で400と700を利用できることを確認し、擬似的な太字などの合成を無効にしました。プレビューで太く見えるだけでは、この条件を満たしたとは言えません。

Web上で文字として表示する場合は、実装担当者に、指定したファミリーだけでなく実際に表示に使われたフォントも調べてもらいましょう。ChromeではElements、Computed、Rendered Fontsから確認できます。公式資料は、端末にあるフォントとWebから読み込むフォントの違いも示しています。デザイナーと開発者が異なるファイルを使える環境では、この区別が重要です。^[3]

そのうえで、全体の組み方を読み直します。見出しと本文の関係、行動を促す文言、改行、余白を見てください。各言語の文章が欠けず、自然に読めるかも確認します。フォントを特定できても、文字組みが適切かは別の判断です。言語とデザインの確認を切り離さないようにしましょう。

これは、発注する人と制作する人の短いやり取りでも実施できます。役立つ記録は、意図した文面と実際の表示を備え、どの版か明確に分かるものです。承認をその版に結び付ければ、次の担当者が「ブランドフォントを使う」の意味を推測せずに済みます。

言語と納品形式ごとに1件ずつ記入します。翻訳を確認した後のキャンペーン文を入れ、制作物や編集可能なテンプレートと一緒に保管してください。ダウンロードには本記事の各言語版に対応するシートが入っています。以下の項目も、登録なしでコピーして使えます。

キャンペーンと言語：[キャンペーン名、言語、想定読者を記入。] SNS用画像、クリエイターが編集するテンプレート、Webページ上のテキストのどれを対象にするか明記します。同じ見た目の方向性を共有していても、納品形式によって制作上の確認は異なります。

承認済みの文面：[見出し、本文、行動を促す文言をそのまま貼り付け。] ほかにも表示する言葉があれば、確認対象に含めます。承認した文面の版を明記し、後で商品名やオファーを変えたら、その部分を見直せるようにします。

フォントの割り当て：[第一候補と併用フォント、正確なファイルまたは版、各テキストの用途に対するウェイトを記入。] 併用フォントがどの言語や文字体系を担うか示します。ファミリー名だけに頼らず、入手元と適用されるライセンスも引き継ぎ資料に残します。

表示の確認：[使用したアプリまたはブラウザ、バージョン、プラットフォームと、対象の文面で実際に使われたフォントを記録。] Webでは、指定したファミリーと表示に使われたファミリーを分けて書きます。別のフォントが出てきたら、意図した併用なのかを承認前に判断します。

最終形式の確認：[書き出したファイルまたは公開ページと、編集可能な元データへのリンクを記載。] 確認したサイズや掲載位置、注意が必要な改行を記録します。納品版の文面が欠けていないことと、見た目の優先順位が伝わることを確かめます。

承認と次の編集：[確認者と承認した版を記入。] 見出し、ウェイト、フォントファイル、納品形式を変えたとき、誰が再確認するか決めます。よい引き継ぎは次の小さな修正を進めやすくします。以前の英語版の承認を、その後のすべての言語への承認と取り違えないことも大切です。

架空のアパレル企業に戻ります。英語の見出しは「Find your next favorite piece.」。説明文で色やサイズを選べるコレクションを紹介し、「View the collection」と続きます。これは実験用に作成した英語の見本文です。ここでは引き継ぎの例として使っており、実在する広告ではありません。

架空の制作指示では、見出しをLatoのウェイト700、説明文と行動を促す文言を400にします。クリエイターには英語、タイ語、日本語のキャンペーン画像が必要で、開発者には対応するランディングページ上のテキストが必要です。1つのプレビューをすべての承認と扱う前に、納品形式を区別します。

タイ語のWeb版では、Latoを先頭に置き、Noto Sans Thaiを併用フォントとして明示します。日本語版はLato、Noto Sans JPの順です。実際の研究結果は、今回の環境において、同一の見本文を両方のウェイトで表示するこの組み合わせを裏付けています。それでも架空のチームは、自社の狙う見た目に合うか、仕上がりを別途確認します。

クリエイターへの引き継ぎには、各言語の文面、選んだファイル、指定ウェイトを含めます。開発者は実際のランディングページで表示されたファミリーを記録し、企業は完成画像を別に確認します。曖昧なフォント名の設定を全員で承認するのではなく、各担当者が目で確かめられる成果を受け持ちます。

後から架空のキャンペーンの見出しに商品名を加えたとしましょう。文面の記録が変わるので、対象の制作物とWebページでその行をもう一度確認します。今回の8ファミリーの実験をやり直す必要はありません。変更した文面が意図どおりに表示され、組まれていることを確かめればよいのです。

これで制作指示は、元の英語デザインでは決まっていなかった点に答えられます。どの言葉を使うのか、どのフォントを併用するのか、ウェイトはいくつか、どの納品版を指すのか。制作の引き継ぎが具体的になります。今回の研究は、この組み合わせで注目度、読みやすさの好み、クリック、売上が上がるかを検証したものではありません。

一枚に統合した画像と、文字を編集できるページでは、書体の受け渡し方が異なります。PNGのキャンペーン画像では、文字の形もラスター画像の一部です。画像を見るとき、ブラウザは制作者のフォント設定からその形を再構築しません。PNGの仕様書は、このピクセルに基づく形式を説明しています。^[4]

そのため、画像の見た目は書き出したファイルで確認します。実際に納品する版を開き、想定する表示サイズで読んでください。書き出し後の切り抜き、文面の欠落、文字間や行間、改行を見ます。編集画面で以前は正しく見えたとしても、その画面が読者に届く最終ファイルではありません。

編集可能なテンプレートには、その先の引き継ぎもあります。受け取った人が文章やウェイトを変え、別の環境でデザインを開くかもしれません。フォント情報と承認済み文面を元データに添え、次の人が編集後の結果を確認できるようにします。以前のスクリーンショットでは、後の版の表示までは確かめられません。

Web上のテキストは、実際に提供するページで確認する必要があります。スタイルシートのファミリー名は要求であり、使用フォントの情報は、その文面にブラウザが何を使ったかを示します。今回の実験では、意図したファイルが読み込まれても、この2つが異なる場合がありました。読み込みエラーだけを確認していたら、インストール済みフォントに切り替わった28ケースは見つからなかったことになります。

だからといって、Web上の文字をすべて画像にするのが解決策ではありません。テキストのままなら、表示を調整しやすくなります。W3Cのアクセシビリティ指針は、同じ表現を実現できる場合には原則として文字画像よりテキストを使うことを求め、例外も定めています。使えるテキストを残しながら、フォントの引き継ぎを明確にしましょう。^[5]

1つのキャンペーンを複数のチャネルで展開する企業は、納品物ごとに確認します。書き出した画像、クリエイター用の編集可能な元データ、開発者が用意した実際のWebページです。どのツールも同じ表示を選ぶと仮定せず、伝えたいメッセージを、実際に受け取られる形と結び付けられます。

8つのファミリーを意図的に選び、Google Fontsリポジトリのコミット47d54ca1ebb14fd864695f1d39dc734f39017c33にあるオリジナルの完全版TTFファイルを固定しました。LatoとPoppinsは通常と太字が別ファイルで、ほかの6ファミリーは可変フォントのため、ファイルは合計10個です。ソース一覧にハッシュ、バージョン、ライセンスへのリンクを記録しています。^[6]

架空の衣料コレクション向けに、見出し、説明文、行動を促す文言を作成しました。測定前に同じ意味を10言語に翻訳し、確認しています。ある言語については、すべてのファミリーに同じ3つの文字列を使いました。最初の160組と併用版の160組から、960個のテキストブロックが得られました。結果から除外したブロックはありません。

隔離したブラウザで、macOS 26.5.1上のChrome 148.0.7778.97を使用しました。固定したファイルを直接読み込み、ローカルファイルによる置き換えは行っていません。スタイルは通常、ウェイトは400と700を明示し、幅は既定値としました。オプティカルサイズと擬似的な書体合成は無効です。10ファイルすべてが正常に読み込まれ、予定したハッシュと一致しました。

各テキストブロックについて、Chromeのネイティブな使用フォント取得機能から、実際のファミリー、PostScript名、独自に提供されたフォントかどうかを取得しました。これをソースファイルと照合し、文字マッピングとシェーピングも別に確認しました。ブラウザのグリフ数は技術的な記録として残していますが、文字数の割合には換算していません。^[7]

3つの欄のいずれかでインストール済みフォントが使われたら、そのケースを「インストール済みフォントを使用」と数えます。「第一候補のみ」は、指定した第一候補が3欄すべてを表示したケースです。比較では、文面、第一候補、要求ウェイトを固定し、代替フォントの指定順だけを変更しました。タイ語14ケースと日本語14ケースが、最初の28ケースすべてに当たります。

結果は、今回の正確なファイル、文面、環境に限られます。言語全体への対応、別のプラットフォームでの同一結果、Google Fonts APIが配信するサブセットの見た目は確認していません。ダウンロードにはケースデータ、ソースへの参照、計算を保存しています。再現用スクリプトは保存済みの測定から件数を確認するもので、新たなブラウザ実験を実行するものではありません。^[1]