すべてのテキストプロパティの設定
テキストプロパティで、テキストの体裁と位置から、サイズ調整の動作とOpenType機能まですべてをコントロールできます。
この記事では、テキストに使用可能なプロパティをすべて説明します。多くのプロパティが利用可能であるため、場所ごとにグループ化し、それに続くセクションで追加情報を提供します。
テキストプロパティへのアクセス
テキストプロパティは、右サイドバーとタイプ設定パネルにあります。
右サイドバー
右サイドバーの[テキスト]セクションにあるテキストプロパティの適用と調整
下のアノテーションが付いた画像を使用して、プロパティパネルの各プロパティを識別してください。リンクをクリックすると各プロパティの詳細が表示されます。
- アイコンをクリックして、テキストスタイルを表示、作成、および適用します。
- フォント名をクリックして、Web、ローカル、および共有フォントのリストを参照し、タイプフェースまたはフォントファミリーを見つけます。
- 矢印を使用して、フォントの太さまたはスタイルを選択します。
- 矢印を使用して、テキストのサイズを調整します。
- 行間フィールドを使用して、テキストの行間の垂直距離を調整します。
- 文字間隔で、文字間の水平距離を調整します。
- 段落間隔で、段落間の垂直距離を調整します。
- サイズ変更動作で、テキストのオーバーフローまたは折り返しの方法を選択します。
- テキストボックス内のテキストの水平方向の配置を調整します
- テキストボックス内のテキストの垂直方向の配置を調整します。
- をクリックして、[タイプの設定]パネルを開き、その他のテキストプロパティを表示します。
[タイプの設定]パネル
[タイプの設定]パネルで、その他のテキストプロパティおよびOpenType機能にアクセスできます。
[タイプの設定]パネルを開くには、[テキスト]セクションの右下隅にある3つの点をクリックします。
- テキストプロパティのプレビューが表示されます。
- [基本設定]タブ
- テキストの水平方向へのサイズ変更の方法を選択します。
- テキストの水平方向の配置を調整します。
- 取り消し線および下線などで、テキストを装飾します。
- 大文字/小文字を調整します。大文字、小文字、キャピタライズ、スモールキャップスから選択します。
- テキストの段落間隔を変更します。
- 番号付きまたは箇条書きのリスト→を作成します。
- テキストを省略して、オーバーフローしたコンテンツを隠します。
- 最大行数を設定し、テキストを省略する条件を定めます。
- 上下トリミングを切り替えます。
- [詳細設定]タブ
- インデント設定を調整します。段落のインデントでテキストの最初の行をオフセットします。引用符のぶら下げおよびリストのぶら下げの切り替えができます。
- 大文字/小文字を調整します。大文字、小文字、キャピタライズ、スモールキャップスから選択します。使用可能な場合は、ケースセンシティブフォームおよび大文字スペーシングの切り替えもできます。
- スタイル、位置(上付きおよび下付き)、分数などの数字設定を適用します。
- 字形、スタイルセット、異体字、左右の間隔などのOpenType機能にアクセスします。
- をクリックして、タイプ設定パネルを閉じます。
- [バリアブル]タブ(バリアブルフォントでのみ使用可能)。フォントのバリアブル軸設定を調整します。
プレビュー
タイプ詳細パネルの上部にあるプレビューを使用して、特定のプロパティまたはOpenType機能の外観を確認します。任意の機能またはプロパティにカーソルを合わせるとプレビューが表示されます。
プレビューしている機能に最適なサンプルテキストが表示されます。これには次のものが含まれます。
- 配置、間隔、およびインデントにはテキストのブロック。
- 数字プロパティには数字。
- 合字またはスタイルの代替が適用される文字(または文字の組み合わせ)。
フォントファミリー、太さ、サイズ
フォントファミリー
フォントに関連する用語がいくつかあります。
- タイプフェースとは、類似したデザイン的特徴をもつ字形とグリフのセットのことです。
- フォントとは、そのタイプフェースの各グリフまたは文字のデザインを作り上げる視覚的詳細を収めたファイルのことです。
- フォントファミリーとは、タイプフェースを作り上げる、スタイルのコレクションのことです。例えば、Helvetica、Times New Roman、およびRobotoはすべてフォントファミリーです。
Figmaでは、セッションの新規テキストレイヤーのデフォルトフォントとしてInterが使用されます。フォント選択機能を使用して、他のフォントファミリーを選択できます。矢印をクリックして、選択したフォントの異なるスタイルを見つけることができます。
フォントの太さ
タイプフェースには、多くのスタイルと太さを持たせることができます。すべてのフォントファミリーには独自のスタイルが付属してます。たとえば、Interフォントファミリーのフォントの太さには、thin、light、regular、medium、bold、blackなどがあります。
フォントファミリーを選択すると、太さを利用できます。フォントファミリーの下のフィールドを直接使用してフォントの太さを調整します。
- 矢印をクリックして、選択したフォントに使用できるスタイルを確認します。
- フォントを太くするまたは細くするには、キーボードショートカットを使用します。
- Mac: ⌥Option ⌘Commandを押したまま、太くするには<を、細くするには>を押します。
- Windows: Ctrl Altを押したまま、太くするには<を、細くするには>を押します。
フォントサイズ
フォントサイズでテキストの拡大縮小を制御します。フォントサイズは密度非依存ピクセルで表現されます。
フォントスタイルの横にあるフィールドを使用してフォントサイズを調整します。フォントサイズを調整するには、次の複数の方法があります。
- 矢印をクリックしてデフォルトのフォントサイズを選択します。
- フィールドに数字を入力します。
- キーボードショートカットを使用します。
- Mac: Shift ⌘Commandを押したまま、大きくするには<を、小さくするには>を押します。
- Windows: Ctrl Shiftを押したまま、大きくするには<を、小さくするには>を押します。
配置
水平方向の配置
配置によって、バウンディングボックス内でのテキストの置き方が決まります。水平方向の配置によって、x軸(水平方向)に沿ったテキスト配置の方法が定義されます。
左揃えテキストは、一般に段落のテキストに使用されます。中央揃えテキストは、見出しのような短い行のテキストに使用されます。
アイコンを使用して、水平方向の配置を選択します。以下から選びます。
- 左揃え
- 中央揃え
- 右揃え
- 両端揃え
両端揃えでは、各行の最初の単語を左端に配置し、最後の単語を右端に配置します。また、両端を揃えた行の各単語の間隔を等しく空けます。
垂直方向の配置
配置によって、バウンディングボックス内でのテキストの置き方が決まります。垂直方向の配置によって、y軸(垂直方向)に沿ってテキストが配置されます。
配置アイコンを使用して、垂直方向の配置を選択します。以下から選びます。
- 上揃え
- 中央揃え
- 下揃え
注: [固定サイズ]に設定されたテキストレイヤーでのみテキストの垂直方向の配置が可能です。サイズ変更が[幅の自動調整]または[高さの自動調整]に設定されたレイヤーでは、配置は無視されます。
装飾
テキストレイヤー全体に、またはテキストを選択して、文字装飾を適用します。次の2種類の装飾が使用可能です。
- 取り消し線
- 下線
取り消し線
取り消し線とは、テキストの中央を通る水平の線のことです。
取り消しを使用して、情報が古くなったこと、または不正確であることを示します。元のテキストを編集する、またはぼかしを入れることなく、状態を伝えることができます。
アイコンをクリックして、選択したテキストに取り消し線を適用します。
下線
下線とは、テキストのベースラインに沿って引かれた水平の線のことです。下線を使用して、テキストの特定部分を強調します。またはリンクが含まれていることを示します。
リンクに下線を引くことは、Webデザインにおいて優れた実践であると考えられています。一貫して適用することで、デザインのアクセシビリティの向上に役立ちます。
アイコンをクリックして、選択したテキストに下線を適用します。
ヒント: キーボードショートカットを使用して選択したテキストに下線を適用します。
- Mac: Option U
- Windows: Ctrl U
大文字/小文字
大文字/小文字によって、選択したテキストの大文字/小文字を切り替えます。テキストを削除して再入力する必要がないので、大文字/小文字を切り替えるときにはとても便利です。以下から選択します。
-
大文字: テキストを大文字にします。
UPPER CASE -
小文字: テキストを小文字にします。
lower case -
キャピタライズ: 全単語の最初の文字を大文字にします。タイトルケースとも呼ばれます。
Title Case -
スモールキャップス: テキストをスモールキャップス(
SMALL CAPS)にします。大文字が小文字と同様に表示されます。大文字への変換のように見えますが、少し異なります。スモールキャップスの文字は、通常そのバランスが異なります(たとえば、太さまたは縦横比)。
リスト
リストは、関連情報を整理して強調するための優れた方法です。Figmaのリスト項目は、番号付きリストで順序を付けて表示することも、箇条書きリストで順序不同で表示することもできます。
数字
数字セクションには、数字についてのプロパティまたは機能が含まれます。このセクションのプロパティは使用しているフォントファミリーによって異なります。
スタイル
スタイルオプションには、プロポーショナルの数字と等幅の数字が含まれます。プロポーショナルの数字では、使用されている文字の幅によって文字間隔が変化します。タビュラー数字とも呼ばれる等幅の数字では、使用されている文字にかかわらず同じ幅の文字間隔になります。
両方の数字は大文字(ライニングスタイルとも呼ばれます)でも小文字(オールドスタイル)でも提供されます。
- プロポーショナル大文字/ライニング
- プロポーショナル小文字/オールドスタイル
- 等幅大文字/ライニング
- 等幅小文字/オールドスタイル
位置(下付きおよび上付き)
下付きまたは 上付きを使用して、数字および文字の位置をオフセットします。
下付き文字はタイプのラインの下に置かれ、上付き文字はタイプのラインの上に置かれます。どちらもデフォルトで他のテキストよりも小さいサイズとなります。
注:
テキストに上付き/下付きを適用すると、フォントから提供される上付き/下付きグリフの使用が試みられます。提供されない場合には、適宜フォントの標準バージョンの文字が使用され、縮小、配置されて、合成バージョンが描画されます。
これはよく“偽のタイポグラフィー”と呼ばれます。
使用可能な上付き/下付きグリフと使用不可能な上付き/下付きグリフを、同じテキストに混ぜて適用する場合、すべてが合成バージョンに統一して更新されます。
分数
数字で分数を作成します。X/Xのように分数を入力してをクリックすると分数になります。
スラッシュ付きゼロ
スラッシュ付きゼロを使用して、スラッシュが貫通した整数のゼロを表示します。これはゼロと文字のOとを区別する1つの方法です。
OpenType機能
OpenTypeとは、フォーマット、またはフォントで利用可能な機能のセットであると言えます。この記事では、OpenTypeの機能について説明します。
Figmaでは、すべてのフォントについてOpenType機能がサポートされます。すべてのフォントで同じOpenType機能がサポートされているわけではありません。
字形、スタイルセット、異体字、左右の間隔などの機能がサポートされます。
サイズ変更
[サイズ変更]プロパティで、コンテンツを収容するためのテキストレイヤーの縮小または拡大方法を制御します。次の設定が使用できます。
- 幅の自動調整
- 高さの自動調整
- 固定サイズ
注: キャンバスをクリックしてテキストレイヤーを作成する場合は、幅の自動調整が使用されます。クリックしてキャンバスでドラッグする場合は、固定サイズが使用されます。テキストレイヤー作成後にサイズを調整すると、サイズ変更が固定サイズに更新されます。
幅の自動調整
幅の自動調整 では、すべてのコンテンツがレイヤーの境界の内側にちょうど収まるようにテキストレイヤーの幅が拡大します。ReturnまたはEnterキーを押すとテキストが改行されます。
高さの自動調整
高さの自動調整 では、コンテンツが収まるようにテキストレイヤーが拡大されます。テキストレイヤーの元の幅より長くなる行は新しい行に折り返されます。
固定サイズ
固定サイズ では、レイヤーのコンテンツにかかわらず、テキストレイヤーの幅と高さのどちらも変化しません。レイヤーの水平方向の範囲を越えて追加されたテキストは折り返されます。テキストレイヤーの垂直方向の範囲を超えてテキストを入力していくことができ、切り取られることはありません。このため、他のレイヤーとの位置揃えが難しくなることがあります。
間隔と書式
文字間隔
文字間隔によって、単語、行、段落の文字間隔を定義できます。これによってテキストの読みやすさが決まります。
カーニングとは異なるものです。カーニングはタイプフェースの各文字間の間隔を調整するプロセスです。
テキストレイヤー全体またはテキストの選択部分に対して、文字間隔を調整します。カーニングを再現するには、2つの文字の間にカーソルを合わせ、文字間隔を調整します。
フィールドを使用して、選択部分の文字間隔を調整するか、または次のキーボードショートカットを使用します。
- Mac: ⌥ Optionを押したまま、広げるには<を、狭くするには>を押します。
- Windows: Altを押したまま、広げるには<を、狭くするには>を押します。
文字間隔値が異なるテキストを選択した場合は、文字間隔はそれに比例して拡大/縮小します。
ヒント: デジタル化以前のシステムでは文字間隔処理としてトラッキングが使用されていました、一般にピクセル(px)で表現されます。 トラッキングを文字間隔に変換するには、次の公式を使用してください。1000pxトラッキング = 100%文字間隔= 1em letter-spacing (CSS)
行間
行間によって、段落テキストの行間の垂直距離を制御します。これにより、デザインのバランスが取れ、原稿の読みやすさを改善できます。行間隔と同じです。.
行間が狭くなると読みにくくなります。行間を広くすると、締まりがなくなり、まとまりのないものとなります。
フィールドを使用して、テキストの行間を調整するか、次のキーボードショートカットを使用します。
- Mac: ⇧ Shift ⌥ Optionを押したまま、広げるには<を、狭くするには>を押します。
- Windows: Alt Shiftを押したまま、広げるには<を、狭くするには>を押します。
固定行間をピクセル(px)で、または行間をフォントサイズのパーセンテージ(%)で設定することができます。
Figmaでは、デフォルト値としてフォント固有の行間が使用され([自動])、その値はタイプフェースごとに異なります。固定行間とパーセンテージの行間を切り替えことができ、値は最も近いピクセル数に変換されます。
行間の変換: 行間の表現方法は各プラットフォームで異なります。Figmaの開発モードには、各プラットフォームに対する値やサイズが含まれています。
別の測定単位を表示することができます。行間について言えば、固定行間をピクセルで表示できるし、またフォントサイズのパーセンテージで表示することもできると言うことです。
ファイルへの閲覧のみアクセス権を持っていて開発モードを使用していない場合は、これらの値を[タイポグラフィー]の[プロパティ]パネルで表示することもできます。
リスト間隔
リスト間隔を使用すると、箇条書きまたは番号付きリスト内の各項目間の間隔を制御できます。デフォルトでは、新しいリストの作成時および既存のテキストスタイルのリスト間隔は0に設定されます。リスト間隔はピクセル(px)で表されます。
リスト項目の間隔を調整するには、次の手順に従います。
- リスト内のテキスト、またはリストテキストのみを含むテキストレイヤーを選択します。
- フィールドを使用して、px値を入力します。または、アイコンにカーソルを合わせ、ドラッグして値を減少(左)または増加(右)させます。
右側のサイドバーにある[テキスト]セクションでをクリックして、[タイプの詳細]パネルからリスト間隔を調整することもできます。
段落インデント
段落インデントによって、最初の行のテキストを右へオフセットします。テキスト左揃えを使用するテキストにのみ段落インデントを適用できます。
経験則からは、フォントサイズの4倍を超えるインデントは避けた方が良いと言えます。テキストレイヤーの幅を考慮に入れることもお勧めします。レイヤーの幅が広くなるのに応じて、インデントも大きくしてください。
Figmaでは、段落のインデントをピクセル(px)値で表現します。[段落インデント]を使用して、段落のインデントを調整します。
ヒント: 段落のインデントはテキストレイヤーのすべての段落に適用されます。1つの段落をインデントする場合は、分離したテキストレイヤーをそのために作成する必要があります。
段落間隔
段落間隔を使用すると、段落間の間隔を制御できます。これにより、デザイン内のテキスト周囲の空白を増減させることができます。空白は、閲覧者の注意を集中させるだけではなく、視認性と可読性を高めるのにも役立ちます。
段落はピクセル(px)で表されます。段落間隔フィールドにpx値を入力します。または、アイコンにカーソルを合わせ、ドラッグして値を減少(左)または増加(右)させます。
注: EnterキーまたはReturnキーを使用すると、新しい段落が作成されます。テキストのサイズ変更が幅の自動調整に設定されている場合はご注意ください。
テキストの省略と最大行数
[テキストを省略]によって、バウンディングボックスからオーバーフローしたテキストが隠されます。省略記号…がテキストの最後に追加され、オーバーフローしたテキストが隠されていることを示します。
[最大行数]によって、省略するまでのテキストの行数を設定できます。
最大行数が使用可能なのは、[テキストを省略]が有効になっていて、次の条件が当てはまる場合のみです。
- テキストのサイズ変更が高さの自動調整または幅の自動調整に設定されている
- 垂直方法のサイズ調整が[コンテンツを内包]に設定されている (テキストがオートレイアウトのフレームにある場合)
上下トリミング
上下トリミングを使用して、テキストの上下の余分なスペースを削除します。これによって、テキストコンテンツのバウンディングボックス周辺の曖昧さが取り除かれ、テキストレイヤーがレイアウト内の他のコンポーネントと同様にふるまうようにできます。
デザインにマッチした正確なピクセル測定によりCSSのマージンおよびパディング値の解析が容易になり、ハンドオフに役立ちます。
引用符のぶら下げ
引用符のぶら下げを切り替えて、バウンディングボックスの外側にテキストレイヤーの引用符の開始記号をぶら下げます。
リストのぶら下げ
リストのぶら下げを切り替えて、バウンディングボックスの外側に各リスト項目のリストマーカーまたは数字ををぶら下げます。これにより、テキストコンテンツとバウンディングボックスの位置が揃います。
バリアブルフォント
1つのバリアブルフォントによって、タイプフェイスのさまざまな動的フォントバリエーションが１つのファイルで提供されます。静的フォントでは、1つのファイルに1つのフォントしか収納できませんが、バリアブルフォントには多くのフォントを収納できます。
バリアブルフォントには太さ、幅、オプティカルサイズ、および斜体等のさまざまなプロパティカスタマイズが含まれていますが、作者はこれ以外のスタイルオプションについて、さらに多くのカスタマイズを提供することもできます。