Foundation テキスト/タイポグラフィ

Foundation のデフォルト設定

Foundation は、ブラウザのデフォルトのテキストサイズを使用します (font-size:100%)。これは、ほとんどのデスクトップブラウザでは 16px を意味します。スマホのブラウザでは 12px を意味します。デフォルトのフォントは、"Helvetica Neue" で、行の高さは 1.5 に設定されています。

これは、<body> 要素に適用されています。

Foundation vs. ブラウザ・デフォルト

この章では、ブラウザのデフォルトに比べ Foundation により少し異なってスタイリングされている HTML 要素を見ていきます。

<h1> - <h6>

Foundation は、HTML ヘディング (<h1> ～ <h6>) を次のようにスタイルします：

例

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Try it Yourself »

チップ: 薄い（lighter）ヘッダを作成するには、ヘッダ要素に .subheader クラスを追加します：

例

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader

h6.subheader

Try it Yourself »

<small>

Foundation において、HTML <small> 要素は全ヘッダに薄い、補助的なテキスト作成するために使われます：

例

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

Try it Yourself »

<a>

Foundation は、HTML <a> 要素を次のようにスタイルします：

例

This is a link.

Try it Yourself »

<abbr>

Foundation は、HTML <abbr> 要素を次のようにスタイルします：

例

WHO was founded in 1948.

Try it Yourself »

<blockquote>

Foundation は、HTML <blockquote> 要素を次のようにスタイルします：

例

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
From WWF's website

Try it Yourself »