英字と日本語のフォントをなじませる考え方

英字と日本語のフォント（文字の形・書体）をなじませたいときは、並べて使う言葉の「線の太さ」と「形の雰囲気」を見比べます。まず今のサイトで使える書体を確かめ、短い見出し1か所で試すと判断しやすくなります。

お店のページに「MENU」と入れたら、その下の「メニューのご案内」と少しちぐはぐに見える。好きな英字フォントを選んだのに、日本語を添えると落ち着かない。そんな場面では、フォント名をたくさん覚えるより、ふたつの文字の関係を見るところから始めましょう。

表紙はAIで制作したイメージイラストです。操作の位置は本文の実画面で確かめてください。

フォントの種類と、太さを分けて見る

フォントの種類は、文字の形のデザインです。英字の先端に小さな飾りがあるか、丸みが強いか、日本語の線が均一かなどに違いがあります。

一方、太さは同じ書体の中で、線をどれくらい細く、または太く見せるかという設定です。「フォントを変えたい」と思っていた違和感が、英字だけ太すぎることから生まれている場合もあります。

まずは、次の順で見比べます。

・片方だけ、線が極端に細い・太い状態になっていないか

・片方だけ、丸みや飾りが強く目立っていないか

・同じくらいの大きさで見せたいのに、片方だけ小さく感じないか

同じ数字を選んだのに差が残ると、どこを直せばよいか迷うかもしれません。

書体によって文字の形や高さが違うため、設定上のサイズや太さが同じでも、同じ印象になるとは限りません。数字だけをそろえるより、実際に使う言葉を並べて確かめます。

文字の種類を増やさず、英字と日本語の太さの差を見直した例です。説明用に制作した架空の表示です。

迷ったら、近い特徴から試してみる

組み合わせを考える出発点として、次のような見方があります。

・線が比較的均一な英字と、日本語のゴシック体

・先端に飾りがある英字と、日本語の明朝体

・丸みのある英字と、角がやわらかい日本語

ゴシック体は、線の太さが比較的そろった日本語の書体。明朝体は、縦横の線に太さの差があり、線の端に特徴がある書体です。

これは「この組み合わせが必ず正解」という規則ではありません。たとえば、落ち着いた雰囲気にしたいのに英字だけ太く強く見えるなら、まず太さを一段階控えて比べてみる。そのうえで形の違いが気になるときに、書体を検討します。

英字と日本語をまったく同じ雰囲気にする必要もありません。英字を小さな飾りのように添えるなら、少し違う書体でもまとまることがあります。ただし、お客さまが読む「料金」「予約方法」などの日本語は、読み取りやすさを優先したい部分です。

線の形や丸みが近い組み合わせを、選ぶ出発点にします。図は印象を比べるための例で、特定の書体を勧めるものではありません。

英字だけ変わって、日本語が変わらない理由

選んだフォントに、日本語の文字が入っていないことがあります。その場合、日本語部分は表示できる別のフォントで補われます。この仕組みを「フォールバック」と呼びます。

そのため、ひとつのフォント名を選んでも、「MENU」と「メニュー」が同じ書体になるとは限りません。英字だけ変わるのは、この仕組みが関係している可能性があります。サイト側の指定など、別の理由も考えられます。

候補を比べるときは、英字だけの見本で決めず、たとえば次の言葉を使います。

・MENU／メニューのご案内

・PRICE／料金について

・OPEN 10:00／営業時間 10:00〜18:00

使いたい漢字、かな、英字、数字を含めると、実際のページで気になる差を見つけやすくなります。

英字と日本語が、別々のフォントで表示される場合があります。実際に使う言葉をまとめて確認しましょう。

WordPressでは、短い見出し1か所で試す

ここでは、文章や写真を「ブロック」というまとまりで編集する標準の画面を使います。対象は記事内の見出しです。ここで選べるのは、そのテーマで利用できる書体です。画面例の候補は「デフォルト」「Manrope」「Fira Code」で、日本語の見た目まで変わるとは限りません。今回は既存の見出しに書体や太さを合わせ、英字と日本語を並べて印象を確かめます。サイト全体の書体は変えません。

手順1：記事を開き、元の見出しを控える

管理画面の「投稿」から一覧を開き、記事の題名をクリックします。固定ページなら「固定ページ」から開きます。直す前の画面を残し、基準にする見出しと、直したい見出しをひとつずつ決めてください。

記事の編集画面で右上の「設定」を開き、「投稿」または「固定ページ」と「ブロック」のタブが出ることを目安にしてください。配置や使える項目は環境で異なります。「テンプレート」など別の画面にいる場合や、タブが見当たらない場合は、この手順で変更せず編集画面を確認します。

手順2：見出しを選び、フォント欄を出す

基準の見出しをクリックします。右側の設定がなければ、右上の、左右に分かれた長方形の「設定」アイコンを押します。「ブロック」タブで、選択中の名前が「見出し2」など、見出しを示す名前になっているか確認します。H2・H3などの段階は変えません。

文字の見た目を調整する「タイポグラフィ」にフォント欄がなければ、「タイポグラフィ」という項目名の右側の「⋮」を開き、「フォント」だけを押して欄を表示します。これは画面例の環境での操作です。項目自体がなければ、次の設定へは進みません。

手順2：「タイポグラフィ」の「⋮」を開き、この「フォント」を押します。色やサイズの項目は触りません。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

「同期パターン」など共通の部品と分かる表示がある場合や、変更範囲が不明な場合は、設定を変える前に止めて確認します。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。

手順3：基準と同じ候補を選ぶ

基準のフォント名をメモしてから、直したい見出しを選び、同じ欄を確認します。元の設定も控えたうえで、「フォント」の欄を開き、基準と同じ候補を選びます。今回は、書体だけを変えて比べます。

手順3：見出しの「フォント」欄を開いた例です。選んだ書体で日本語も変わるとは限りません。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

たとえば、基準が「デフォルト」なら同じ候補を選びます。画面にある特定の書体名を、すべてのサイトへ勧めているわけではありません。英字と日本語を別々のブロックにしている場合は、片方だけ違う指定になっていないかを見ます。

太さだけを直したい場合は、書体の変更はせず、「タイポグラフィ」の「⋮」から「外観」を表示できるか確認します。表示できれば、元の値を控えて基準と同じ候補を選びます。項目がなければ無理に進みません。サイズや色まで一度に変えない方が、違いを比べやすくなります。

手順4：日本語と並べてプレビューする

右上のモニター形の「表示」から「モバイル」を選びます。英字だけ線がかすれないか、日本語より目立ちすぎないか、営業時間などの数字も読めるかを確認します。「新しいタブでプレビュー」で閲覧側の表示も見比べられます。

ここで使うのは「モバイル」と「新しいタブでプレビュー」だけです。ほかの項目は触らず、もう一度設定を変えるときは「デスクトップ」に戻します。

手順5：戻すか、更新するかを決める

合わなければ、更新前に左上の左向きの曲がった矢印「元に戻す」を押し、元の見出しを確かめます。控えた設定を選び直す方法もあります。良ければ「保存」または「更新」を押し、公開ページもスマートフォンで見直します。試すためだけに「公開」は押しません。

フォントの項目がなければ今の書体を保ち、気になる点を画面にメモします。飾りの英字なら、日本語の見出しだけにする方法もあります。必要な案内が残ることを確かめて選んでください。

フォントを増やすプラグイン（追加機能）の導入や外部フォントの読み込み、見た目をコードで変えるCSSの変更は、今回の手順には含めません。

更新したあとの確認と、次に使う基準

更新後に戻したいときは、記録した設定へ戻す方法があります。「リビジョン」という保存履歴が使える場合もありますが、履歴の有無は環境次第です。復元でほかの文章変更まで戻らないか、内容を比べて判断しましょう。

まとまりが出たら、「英字の見出しはこの書体と太さ」「日本語の見出しはこの書体」と、役割ごとに使い方を残します。新しい記事を作るたびに別のフォントを探さずに済みます。

英字と日本語の組み合わせに迷ったら、気になるページのURLと「やわらかくしたい」「落ち着いて見せたい」など希望する雰囲気を添えて、ココナラ内のメッセージからご相談ください🌿 画面の画像を送る際は、お客さまの個人情報やログイン情報を隠してください。