TypekitのWebフォントを使用して、コードを記述せずに美しいWebサイトをデザインします。

Creative Cloudメンバーシップの一環として、TypekitのWebフォントを直接ご利用いただけます。高品質のフォントが数多く用意されており、デスクトップとモバイルのデザインでシームレスに使用できます。

1. TypekitからWebフォントを追加する

beautiful-web-typography.zipファイルをダウンロードして、 Ike's_Bikes_before.muファイルを開きます。デザインモードに切り替えて、テキストツールをクリックします。「Services」という見出しの下にあるテキストを選択します。テキストパネルのフォントポップアップをクリックして、メニューから「+ Web フォントを追加」を選択します。

Webフォントを追加する

2. フォントを選択する

「開始」をクリックし、Webフォントを追加ウィンドウで「Typekit」タブをクリックします。フォントブラウザーで「Adelle」を検索して選択し、「OK」をクリックします。

テキストが選択されている状態で、フォントポップアップメニューから「Adelle Light」を選択します。

注意:有償のCreative Cloudメンバーシップでは、Typekitの拡張ライブラリのWebフォントをご利用いただけます。このチュートリアルでは、Webサイトにこの外観を適用するために、拡張ライブラリのフォントを使用しています。

フォントを検索する

3. 見出しと段落のフォントを組み合わせる

見出しと段落にそれぞれ適したフォントを選んで使用すれば、このサイトをすっきりとしたモダンな外観にすることができます。

手順1と同じ手順で「Prenton Ultra Condensed」フォントを追加してから、テキストツールを使用して「Services」という見出しを選択します。コントロールパネルのフォントポップアップメニューをクリックし、Prenton Ultra Condensed/Regularを選択します。

Prenton Ultra Condensedフォントを追加する

4. 段落スタイルを再定義する

見出しテキストが選択されている状態で、段落スタイルパネルを開きます。「H1 +」スタイルが強調表示されていることを確認します。「スタイル再定義」アイコンをクリックすると、すべての見出しに新しいフォントが適用されます。

「Services」という見出しの下にある段落を選択します。段落スタイルパネルで「Body +」スタイルが強調表示されていることを確認し、「スタイル再定義」アイコンをクリックしてスタイルを再定義します。これで本文テキストがすべてAdelle Lightで表示されるようになります。

ヒント:スタイルを右クリックし、「スタイル再定義」を選択してスタイルを更新することもできます。

スタイル再定義アイコン

5. 見出しをすべて大文字にする

テキストツールを使用して「Point Services」という見出しを選択し、テキストパネル(ウィンドウ/テキスト)で大文字アイコンをクリックします。

テキストパネルを開く

6. 上付き文字を適用する

「93 Point Service」という見出しの下にある金額の「00」を選択し、テキストパネルで上付き文字アイコンをクリックします。ページ上の他のすべての金額にも同じ操作をおこないます。

上付き文字を適用する

7. リストの箇条書き文字を変更する

各フォントにはそれぞれデフォルトの箇条書きスタイルのセットが用意されていますが、別のフォントの箇条書きスタイルを箇条書きリストに適用して独自の外観を作成することもできます。手順1と同じ手順で「Franklin Gothic URW Extra Condensed」フォントを追加します。

箇条書きパネル(ウィンドウ/箇条書き)を開き、テキストツールで「67 Point Service」という見出しの下にあるリストを選択します。箇条書きリストボタンをクリックすると、リストが作成されます。

箇条書きパネルで箇条書きリストメニューの横にあるオプションボタンをクリックし、「+新規文字」をクリックします。フォントポップアップメニューをクリックし、Franklin Gothic URW Extra Condensed/Bookを選択します。ひし形の箇条書き文字をクリックし、「追加」、「OK」の順にクリックします。

テキストが選択された状態の箇条書きパネル
箇条書き文字を変更する

8. 新しい箇条書き文字を適用する

これで箇条書きパネルでひし形を選択してリストに適用できるようになりました。

ヒント:これを新しい箇条書きスタイルとして保存できます。保存するには、箇条書きスタイルパネルを開き、新規スタイルアイコンをクリックします。こうすれば、ページ上の他のすべてのリストに箇条書きスタイルを適用できます。

新しい箇条書き文字を適用する

9. 合字を使用する

合字をサポートするフォントを選択すれば、「ff」や「fi」など、組み合わせると重なりがちな2連または3連の文字の見栄えを良くすることができます。

本文スタイルに適用したAdelleフォントでは合字がサポートされていますが、最新のブラウザーで確実に合字を表示するためには、ファイル/サイトプロパティを開きます。「コンテンツ」タブをクリックし、Webフォントの文字メニューをクリックして、「すべて」を選択します。

合字を使用する

 

これですべての作業が終わりました。チュートリアルをさらに役立つものにするために、アンケートにご協力ください。

 

03/15/2017
Ali Pordeli
このページは役に立ちましたか。