WordPressテーマTCDで搭載された美しいフォント

フォントは、人々の印象を司る重要な要素のひとつ。Webデザインにおいて、フォントは単なる文字の表示以上の役割を果たします。

Appleは、なぜWindowsとの差別化に成功したのか。スティーブ・ジョブズ氏がタイポグラフィの美しさに魅了され、フォントにこだわり抜いたOSを開発したからです。美しいタイポグラフィが人々に洗練されている印象を与え、Appleのブランドはより強固になっていきました。

Webデザインにおいてもフォントはデザインを構成する重要な要素です。WordPressテーマにおいてもフォントの重要性は同じです。

昨今のTCDテーマでは、タイポグラフィに力を入れており、フォントの改良を行いました。

TCDのフォントとその使い方

これまでのTCDテーマはフォントセットは、「明朝」「ゴシック」のみでしたが、このたび新しいWordPressテーマを中心に大幅なアップデートを行いました。

主なアップデート内容はこちらです。

・システムフォント 刷新＆追加
・Webフォント 導入

それぞれの概要と使い方を、以下でご紹介いたします。次の2ステップで使えます。

1. 基本設定「フォント」でフォントセットを登録する。
2. フォントを設定できる各所でフォントセットを呼び出す。

1. フォントセットを登録する

各フォントセットは、このようなUIで見た目を確認しながら設定できます。

フォントタイプを「システムフォント」「Webフォント」から選ぶと、設定項目が変化します。

システムフォント

用意されているシステムフォントの中から和文・欧文で使用するフォントを一つ選択します。

TCDテーマでは、MacOS、WindowsOS、iOSに入っているシステムフォントの中から、見栄えの良いフォントだけを組み合わせてフォントファミリーを作成しています。

以下のフォントの中から和文・欧文とそれぞれ選択してご利用頂けます。
※デバイス・OSによって、入っているフォントが異なる場合があります。

和文フォント

和文フォントは、明朝、ゴシック、教科書の3タイプです。

1. ゴシック体
2. 明朝体
3. 教科書体

ゴシック体：

明朝体：

教科書体：

欧文フォント

欧文フォントには、サンセリフ体・セリフ体・スクリプト系のフォントが13種類入っています。

サンセリフ体：

1. Arial：Win Mac iOS – 最もベーシックなフォント。
2. Optima：Mac iOS（※WinではSegoe UI） – 美しいフォルム。
3. Helvetica：Mac iOS（※WinではArial） – バランスのとれたフォント。
4. Avenir：Mac iOS（※WinではCalibri） – モダンで直線的
5. Verdana：Win Mac iOS – 大きな文字間隔と広めの字形
6. Tahoma：Win Mac – よりコンパクトな字形

セリフ体：

1. Palatino：Win Mac iOS古典的なセリフフォント
2. Times New Roman：Win Mac iOS – 最もベーシックなフォント。
3. Georgia：Win Mac iOS – 洋書風
4. Didot：Mac – 上品で華奢（※WinではTimes New Roman）
5. Baskerville：Mac – 細さの緩急大きめ（※WinではGeorgiaで代用）
6. Rockwell：Win Mac – タイプライター風（太い）

スクリプト体：

• Zapfino：Mac iOS – エレガントで優雅（※WinではInk Free）

Arial

Optima

Helvetica

Avenir

Verdana

Tahoma

Palatino

Times New Roman

Georgia

Didot

Baskerville

Rockwell

Zapfino

Webフォント

Webフォントを選択した場合、次のフォントから設定できます。

Webフォントの魅力はどのデバイス環境でも同じフォントが表示されることに加え、洗練されているデザインのものが多いことです。

1. Noto Sans JP
2. Zen Kaku Gothic New
3. Noto Serif JP
4. Zen Old Micho
5. Klee One
6. ROBOTO
7. Hind Madurai

Noto Sans JP

https://fonts.google.com/noto/specimen/Noto+Sans+JP

Zen Kaku Gothic New

https://fonts.google.com/specimen/Zen+Kaku+Gothic+New

Noto Serif JP

https://fonts.google.com/noto/specimen/Noto+Serif+JP

Zen Old Micho

https://fonts.google.com/specimen/Zen+Old+Mincho

Klee One

https://fonts.google.com/specimen/Klee+One

ROBOTO

https://fonts.google.com/specimen/Roboto

Hind Madurai

https://fonts.google.com/specimen/Hind+Madurai

2. フォントセットを呼び出す

次に登録したフォントセットを各所で呼び出します。↓は基本設定 > フォントの設定画面です。

上記はWordPressテーマ「PANDORA」の例ですので、お使いのテーマによって変更できる箇所は変わりますが、基本的には、下記箇所のフォント・文字サイズを設定可能です。

フォントで印象が変わる。

文字の美しさは、視認性が向上するだけでなく、ブランドの個性の表現にも繋がります。洗練されたフォントをWebサイトで表現することで、サイトの価値も向上します。

人気フォントを搭載したWordPressテーマを使うことで、あなたのサイトはさらに美しくなります。

TCDテーマのフォントの特徴

TCDテーマのフォントの特徴をまとめると次の通りです。

• システムフォント・Webフォントから選べる
• 要素ごとにフォントを設定可能（複数のフォントファミリーを作成可）
• ロゴもフォントで作成できる

管理画面から簡単に変更できる。

キャッチコピーは「ROBOTO」、本文は「ゴシック体」、見出しは「Noto Sans JP」というように、各要素ごとにフォントを変更することも可能です。キャッチコピーなど目立たせたいところだけWebフォントにするといった使い分けが可能です。

管理画面から何度でもやり直しが利くので、気に入ったタイポグラフィになるまで変更するのもありですね。

ロゴも美しいフォントが使える。

ロゴはPNGやSVGなどの「画像」で作成されるのが一般的ですが、ロゴ部分をWebフォントで表示してもおもしろいです。なぜなら、TCDのフォントで作られたロゴは美しいからです。

ロゴに見合うフォント、太さ（ウェイト）を選択することができます。

ロゴはWebフォントで作成（PANDORAのデモサイト）

ロゴをWebフォントにするメリットは次のようなもの。

• どのデバイスでも同じ表示になる
• ロゴを作る手間がいらない

シンプルなロゴでとりあえず、という場合にはとても便利です。ロゴ作成が苦手な方でも綺麗なサイトロゴが表示できます。

TCDのフォントの対応状況

販売中のTCDテーマすべてで、新しいフォントオプションが使えます。