原文：Typography
グローバル設定、見出し、本文、リストなどのブートストラップ文字体裁のドキュメントと例があります。
グローバル設定
Bootstrapは、基本的なグローバルな表示、文字体裁とリンク・スタイルを設定します。より多くの制御が必要な場合、テキストのユーティリティ・クラスを確認して下さい。
- 各々のOSとデバイスのために、最適なフォントファミリーを選択するネイティブ・フォント・スタックを使用します。
- より包括的かつアクセス可能なタイプのスケールについては、私たちは、ブラウザのデフォルト・ルートのフォント・サイズ（通常、16px）を仮定します。それで、訪問者は、必要に応じてそれらのブラウザのデフォルトをカスタマイズすることができます。
- <body>に適用される私たちの文字体裁に基づいて、$font-family-base、$font-size-baseと$line-height-base属性を使用します。
- $link-colorによってグローバルなリンクの色を設定し、:hoverだけでリンク・アンダーラインを適用します。
- <body>（既定で#fff）の背景色を設定するために$body-bgを使用します。
これらのスタイルは、within _reboot.scss内で、見つけることができます。そして、グローバル変数は、_variables.scssで定義されています。$ font-size-baseをremに設定してください。
見出し
すべてのHTML見出し（<h6>から<h1>）は、利用可能です。
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>また、.h1から.h6クラスは、あなたが、見出しのフォント・スタイルと一致させたい時のため、利用できますが、関連するHTML要素を使うことができません。
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>見出しをカスタマイズする
含まれているユーティリティ・クラスを使用して、Bootstrap 3から、小さな付随的な見出しテキストを再作成します。
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>見出しを表示する
従来の見出し要素は、あなたのページ内容の中で、最も効果的に動作するように設計されています。あなたが、見出しを目立たせる必要があるとき、見出しの表示を使用することについて考えてみてください。－より大型の、僅かに独断的な見出しのスタイル。
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>前文
段落を目立たせるには、.leadを追加します。
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>インライン・テキスト要素
一般的なインラインHTML5要素のスタイル設定。
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>また、.markと.smallクラスは、タグに導入される不必要なセマンティック意味を回避し<mark>と<small>として、同じスタイルを適用するために利用できます。
上記では示されていませんが、HTML5では、<b>と<i>を自由に使用してください。<b>は、重要性を伝えることなく単語やフレーズを強調表示するためのもので、<i>音声、技術用語などが対象です。
テキスト・ユーティリティ
私たちのテキスト・ユーティリティと色ユーティリティで、テキストの整列、変形、スタイル、太さと色を変更します。
略号
拡張されたバージョンのホバーを表示するために、略号と頭字語のためのHTMLの<abbr>要素の実装を様式化します。省略表記は、デフォルトの下線を持っています。そして、ホバーで、追加のコンテキスト、そして、ユーザーに支援技術を提供するために、ヘルプ・カーソルを取得します。
少し小さいフォントサイズの略号に、.initialismを追加します。
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>Blockquotes
あなたの文書内の他のソースから、内容を引用するブロックのために、引用符として、HTMLのまわりを<blockquote class = "blockquote">で囲みます。
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>ソースに名前をつける
ソースを識別するために、<footer class="blockquote-footer">を追加します。<cite>で、ソース操作の名前をラップします。
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>位置合せ
あなたのblockquoteの配置を変更するために、必要に応じてテキスト・ユーティリティを使用します。
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>リスト
Unstyled
リスト項目（直接の子供たちのみ）のデフォルトのリスト・スタイルと左のマージンを削除します。これは、直接の子供たちのリスト項目にだけ、適用されます。同じように、あなたが、入れ子になったリストのために、クラスを追加する必要が有ることを示しています。
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>インライン
.list-inlineと.list-inline-itemを組合せた2つのクラスで、リストの丸を削除し、少しのマージンを適用します。
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>説明リストの配置
私たちのグリッドのシステムのあらかじめ設定されたクラス（やセマンティックなmixins）を使用することで、用語と説明を水平に整列させます。より長い用語については、あなたは、必要に応じて、.text-truncateクラスを追加し、テキストを省略記号で切り捨てることができます。
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>レスポンシブ文字体裁
レスポンシブ文字体裁とは、一連のメディア・クエリ内のルート要素のフォント・サイズを単純に調整することで、テキストとコンポーネントの縮尺を合わせることを指します。Bootstrapは、あなたのために、これを行いません。しかし、あなたが、それを必要とする場合、追加するのは、かなり簡単です。
実際に、その例があります。任意のフォントサイズとメディアクエリを選択してください。
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}