Foundation は、ブラウザのデフォルトのテキストサイズ（font-size:100%）を使用します。
大部分のデスクトップブラウザでは、これは 16px を意味し、モバイル用のブラウザでは、12px を意味します。
デフォルトのフォントは、"Helvetica Neue" で、行の高さは 1.5 に設定されています。
これは、<body> 要素に適用されます。
さらに、すべての <p> 要素は 1.25rem の下マージンと 1.6 の行の高さを持っています。
下の要素は、ブラウザのデフォルトより Foundation によって若干異なるスタイルが設定されている HTML 要素です。 結果/相違点を確認するために "Try it" の例を見てください。
| 要素 | 説明 | 例 |
|---|---|---|
| <h1> - <h6> | h1 - h6 見出し | Try it |
| <a> | ホバー効果を持つ水色のテキストリンク（下線なし）を作成する：Link | Try it |
| <small> | 全ての見出しに、薄く、2次的なテキストを作成する
見出し（2次テキスト） |
Try it |
| <blockquote> | 他のソースからのコンテンツブロックであることを示す
|
Try it |
| <strong> | 太字のテキストを示す：Bold text | Try it |
| <em> | イタリック体のテキストを示す：Italic text | Try it |
| <abbr> | abbr 要素は、略語または頭字語を示す。 タイトル属性を持つ abbr は、点線の下ボーダーとホバーした時のヘルプカーソルを持っており、 ホバー時には追加のコンテキストを提供する。 | Try it |
| <kbd> | 一般的には、キーボードから入力された入力を示す：CTRL + P | Try it |
| <hr> | 横線を示す | Try it |
| <code> | コードのインライン・スニペットを示す：span, div |
Try it |
| <ul> | 順序なしリストを示す | Try it |
| <ol> | 順序付きリストを示す | Try it |
| <dl> | 説明リスト（HTML5 より前は「定義リスト」）を示す | Try it |
要素のテキストの配置を変更するには、次のCSSクラスを使用します：
| クラス | 説明 | 例 |
|---|---|---|
| .text-left | テキストを左揃えにする | Try it |
| .text-right | テキストを右揃えにする | Try it |
| .text-center | テキストを中央揃えにする | Try it |
| .text-justify | テキストを両端揃えにする (新聞のように、各行が同じ幅になるよう行を伸ばす) | Try it |
いろいろな画面の要素のテキスト配置を変更するには、次の CSS クラスを使用します：
| クラス | 説明 | 例 |
|---|---|---|
| 左揃え | ||
| .small-text-left | 全ての画面サイズのテキストを左揃えにする | Try it |
| .small-only-text-left | 小型画面 (幅が 40em 未満) のテキストだけを左揃えにする | Try it |
| .medium-text-left | 40.0625em より広い画面のテキストを左揃えにする | Try it |
| .medium-only-text-left | 40.0625em と 64em の間の画面幅のテキストを左揃えにする | Try it |
| .large-text-left | 64.0625em より広い画面のテキストを左揃えにする | Try it |
| .large-only-text-left | 64.0625em と 90em の間の画面幅のテキストを左揃えにする | Try it |
| .xlarge-text-left | 90.0625em より広い画面のテキストを左揃えにする | Try it |
| .xlarge-only-text-left | 90.0625em と 120em の間の画面幅のテキストを左揃えにする | Try it |
| .xxlarge-text-left | 120em より広い画面のテキストを左揃えにする | Try it |
| 右揃え | ||
| .small-text-right | 全ての画面サイズのテキストを右揃えにする | Try it |
| .small-only-text-right | 小型画面 (幅が 40em 未満) のテキストだけを右揃えにする | Try it |
| .medium-text-right | 40.0625em より広い画面のテキストを右揃えにする | Try it |
| .medium-only-text-right | 40.0625em と 64em の間の画面幅のテキストを右揃えにする | Try it |
| .large-text-right | 64.0625em より広い画面のテキストを右揃えにする | Try it |
| .large-only-text-right | 64.0625em と 90em の間の画面幅のテキストを右揃えにする | Try it |
| .xlarge-text-right | 90.0625em より広い画面のテキストを右揃えにする | Try it |
| .xlarge-only-text-right | 90.0625em と 120em の間の画面幅のテキストを右揃えにする | Try it |
| .xxlarge-text-right | 120em より広い画面のテキストを右揃えにする | Try it |
| 中央揃え | ||
| .small-text-center | 全ての画面サイズのテキストを中央揃えにするCenters the text for all screen sizes | Try it |
| .small-only-text-center | 小型画面 (幅が 40em 未満) のテキストだけを中央揃えにする | Try it |
| .medium-text-center | 40.0625em より広い画面のテキストを中央揃えにする | Try it |
| .medium-only-text-center | 40.0625em と 64em の間の画面幅のテキストを中央揃えにする | Try it |
| .large-text-center | 64.0625em より広い画面のテキストを中央揃えにする | Try it |
| .large-only-text-center | 64.0625em と 90em の間の画面幅のテキストを中央揃えにする | Try it |
| .xlarge-text-center | 90.0625em より広い画面のテキストを中央揃えにする | Try it |
| .xlarge-only-text-center | 90.0625em と 120em の間の画面幅のテキストを中央揃えにする | Try it |
| .xxlarge-text-center | 120em より広い画面のテキストを中央揃えにする | Try it |
| 両端揃え | ||
| .small-text-justify | 全ての画面サイズのテキストを両端揃えにするJustifies the text for all screen sizes | Try it |
| .small-only-text-justify | 小型画面 (幅が 40em 未満) のテキストだけを両端揃えにする | Try it |
| .medium-text-justify | 40.0625em より広い画面のテキストを両端揃えにする | Try it |
| .medium-only-text-justify | 40.0625em と 64em の間の画面幅のテキストを両端揃えにする | Try it |
| .large-text-justify | 64.0625em より広い画面のテキストを両端揃えにする | Try it |
| .large-only-text-justify | 64.0625em と 90em の間の画面幅のテキストを両端揃えにする | Try it |
| .xlarge-text-justify | 90.0625em より広い画面のテキストを両端揃えにする | Try it |
| .xlarge-only-text-justify | 90.0625em と 120em の間の画面幅のテキストを両端揃えにする | Try it |
| .xxlarge-text-justify | 120em より広い画面のテキストを両端揃えにする | Try it |
| クラス | 説明 | 例 |
|---|---|---|
| .left | 左へ要素をフロートする | Try it |
| .right | 右へ要素をフロートする | Try it |
| .clearfix | フロートをクリアする - フロート要素の親要素に追加しなければならない | |
| .hide | 要素を非表示にする (CSS display: none) |
Try it |
| .list-inline | 1つの線上に全リスト項目を配置する | Try it |
| .lead | <p> 要素を目立たせる： Stand out text |
Try it |
| .subheader | <h1> - <h6> 要素に薄い色の見出しを作成する | Try it |