Skip to content

Commit

Permalink
Readmeリード変更、統一表記反映、TODO追記
Browse files Browse the repository at this point in the history
Readmeのリードを変更しました。
統一表記(Web、ブラウザなど)を反映しました。
図版のところに〈TODO〉と追記をしました。
  • Loading branch information
syyashiro committed Jan 17, 2019
1 parent 8d8ca0f commit 2388374
Show file tree
Hide file tree
Showing 17 changed files with 42 additions and 42 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ Webタイポグラフィに関するキーワードを解説、同分野にお

## 概要

近年、日本語のサイトでもWebフォント導入が進み、Webタイポグラフィへの関心が高まりつつあります。
ただ英語圏と比較すると、そのノウハウはあまり蓄積されておらず議論も少ないのが現状です。
本プロジェクトでは、エンジニアやディレクターがWebでタイポグラフィに取り組む際に使えるよう、「実践」の観点からキーワードの解説を行います。
Webタイポグラフィの知見が、日本語で蓄積・共有できる場所になればと考えています。
(記事内容やタイトル、目次などの内容は、随時更新される可能性があります)
近年、日本語のサイトでもWebフォントへの注目が集まるなど、Webタイポグラフィに対する関心が高まりつつあります。ただ英語を始めとするラテン語圏と比較すると、そのノウハウはあまり蓄積されておらず議論も少ないのが現状です。

そんな状況を鑑み、本プロジェクトではWebの制作に関わる人がタイポグラフィに取り組む際に参照できるよう、「実践」の観点からキーワードを取り上げていきます。Webタイポグラフィの知見が、日本語で蓄積・共有できる場所になればと考えています。(記事内容やタイトル、目次などの内容は、随時更新される可能性があります)

## 目次

Expand Down Expand Up @@ -87,5 +85,7 @@ Webタイポグラフィの知見が、日本語で蓄積・共有できる場

## クレジット
執筆:[鈴木丈](https://github.com/terkel)
編集:矢代真也
協賛:<a href="https://webfont.fontplus.jp" target="_blank">FONTPLUS</a>
編集:[矢代真也](https://github.com/syyashiro)
協賛:<a href="https://webfont.fontplus.jp" target="_blank">FONTPLUS</a>

[参考文献一覧](references.md)
2 changes: 1 addition & 1 deletion references.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 参考文献

## ウェブ
## Web

- [TYPOGRAPHY タイポグラフィ 実践用語集](http://robundo.com/robundo/typography-glossary/)
- [フォント用語集 | 文字の手帖 | 株式会社モリサワ](https://www.morisawa.co.jp/culture/dictionary/)
Expand Down
6 changes: 3 additions & 3 deletions terms/family.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# ファミリー

ファミリー(family)とは、複数のウェイトやイタリック体などのスタイルを含む、同じデザインで統一された書体のグループを言います。たとえばHelvetica Neueやメイリオなどがファミリーにあたります。ファミリーによって書体の構成は様々で、数十のウェイトやスタイルからなるものもあれば、ひとつのスタイルしか持たないものもあります。
ファミリー(family)とは、複数のウェイトやイタリック体などのスタイルを含む、同じデザインで統一された書体のグループをいいます。たとえばHelvetica Neueやメイリオなどがファミリーにあたります。ファミリーによって書体の構成は様々で、数十のウェイトやスタイルからなるものもあれば、ひとつのスタイルしか持たないものもあります。

[図版:Helveticaの書体バリエーション]
〈TODO〉[図版:Helveticaの書体バリエーション]

## 実践

Expand All @@ -23,4 +23,4 @@ h1 {
- [書体](./typeface.md)
- [フォント](./font.md)
- [ウェイト](./weight.md)
- [イタリック](./italic.md)
- [イタリック](./italic.md)
2 changes: 1 addition & 1 deletion terms/font.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@

- [書体](./typeface.md)
- [グリフ](./glyph.md)
- [ファミリー](./family.md)
- [ファミリー](./family.md)
6 changes: 3 additions & 3 deletions terms/glyph.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# グリフ

グリフは、字形とボディの情報を含む、フォントの文字データのことです。あるフォントの「あ」の文字は、「あ」の具体的な字形と、その周囲のスペースを含む正方形のボディから成り立っています。これらの字形とボディを合わせて「『あ』のグリフ」と呼びます。また例えば、全角スペースは字形を持ちませんが、全角幅のボディを持つグリフである、と言えます
グリフは、字形とボディの情報を含む、フォントの文字データのことです。あるフォントの「あ」の文字は、「あ」の具体的な字形と、その周囲のスペースを含む正方形のボディから成り立っています。これらの字形とボディを合わせて「『あ』のグリフ」と呼びます。また例えば、全角スペースは字形を持ちませんが、全角幅のボディを持つグリフである、といえます

[図版:文字の字形と、その周囲のスペースを重ね合わせたようなイメージ]
〈TODO〉[図版:文字の字形と、その周囲のスペースを重ね合わせたようなイメージ]

## 関連項目

- [字形](./jiikei.md)
- [フォント](./font.md)
- [ボディ](./body.md)
- [ボディ](./body.md)
6 changes: 3 additions & 3 deletions terms/gothic.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

## 用法

サンセリフ体と同様に、公共のサインなどのほか、ウェブサイトでも多く採用されています。また、とくに書籍や雑誌において、本文が明朝体の場合に強調する語句をゴシック体にする例も見られます。
サンセリフ体と同様に、公共のサインなどのほか、Webサイトでも多く採用されています。また、とくに書籍や雑誌において、本文が明朝体の場合に強調する語句をゴシック体にする例も見られます。

## 実践

ウェブでゴシック体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`san-serif`キーワードも指定するとよいでしょう。
Webでゴシック体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`san-serif`キーワードも指定するとよいでしょう。

```css
body {
Expand All @@ -21,4 +21,4 @@ body {
## 関連項目

- [サンセリフ体](./sans-serif.md)
- [明朝体](./mincho.md)
- [明朝体](./mincho.md)
2 changes: 1 addition & 1 deletion terms/itaiji.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 異体字

異体字とは、同じ意味・同じ読みの文字でも、複数の字体を持つものを言います。例えば「会」と「會」、「高」と「髙」などがそうです。
異体字とは、同じ意味・同じ読みの文字でも、複数の字体を持つものをいいます。例えば「会」と「會」、「高」と「髙」などがそうです。

## 関連項目

Expand Down
8 changes: 4 additions & 4 deletions terms/italic.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

イタリック体(italic)は、欧文書体のスタイルのひとつで、筆記体風の傾いた字形が特徴です。イタリック体ではないスタイルは立体やローマン体と呼ばれます。イタリック体は欧文固有のスタイルで、日本語のグリフはイタリック体を持ちません。

[図版:イタリック体と立体の比較、セリフ体とサンセリフ体それぞれ]
〈TODO〉[図版:イタリック体と立体の比較、セリフ体とサンセリフ体それぞれ]

## 用法

欧文では、強調や、作品のタイトル、外国語などをイタリック体で表現することがあります。

## 実践

ウェブでイタリック体を利用する場合は、CSSで`font-family`プロパティの値に`italic`を指定します。
Webでイタリック体を利用する場合は、CSSで`font-family`プロパティの値に`italic`を指定します。

```css
.Quote {
Expand All @@ -20,9 +20,9 @@

## 発展

イタリック体を利用しようと思っても、ファミリーがイタリック体を持っていなかったり、ウェブフォントでイタリック体がダウンロードされていなかったりすることがあります。そういった場合にCSSでイタリックを指定すると、ブラウザーは立体のフォントを機械的に傾けて擬似的なイタリック体として表示します。しかし本来イタリック体は立体をただ傾けたものではなく、異なる字形として独自にデザインされたものです。そのためブラウザーによる擬似的なイタリックは「にせイタリック(faux italic)」と呼ばれます。にせイタリックは本来の適切にデザインされた形ではないため、読みづらく、不格好なものになりがちです。イタリック体で表示するときは、ファミリーにイタリック体が含まれることを確認しましょう。
イタリック体を利用しようと思っても、ファミリーがイタリック体を持っていなかったり、Webフォントでイタリック体がダウンロードされていなかったりすることがあります。そういった場合にCSSでイタリックを指定すると、ブラウザーは立体のフォントを機械的に傾けて擬似的なイタリック体として表示します。しかし本来イタリック体は立体をただ傾けたものではなく、異なる字形として独自にデザインされたものです。そのためブラウザーによる擬似的なイタリックは「にせイタリック(faux italic)」と呼ばれます。にせイタリックは本来の適切にデザインされた形ではないため、読みづらく、不格好なものになりがちです。イタリック体で表示するときは、ファミリーにイタリック体が含まれることを確認しましょう。

[図版:にせイタリックと本物のイタリックの比較]
〈TODO〉[図版:にせイタリックと本物のイタリックの比較]

また、日本語書体にはイタリックに相当するスタイルはありません。CSSによって傾けることも可能ですが、欧文の「にせイタリック」同様、ブラウザーによる機械的な処理であり、書体デザイナーが意図したデザインではない点に注意が必要です。

Expand Down
4 changes: 2 additions & 2 deletions terms/jikei.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# 字形

字形は、印刷や画面表示などで視覚化された文字の形のことです。文字の抽象的な概念である字体を具体化した形が字形と言えます。同じ文字でも、フォントによって字形は異なります。
字形は、印刷や画面表示などで視覚化された文字の形のことです。文字の抽象的な概念である字体を具体化した形が字形といえます。同じ文字でも、フォントによって字形は異なります。

[図版:明朝体とゴシック体で「永」の文字を並べるなど、文字の具体的な形をイメージさせるもの]
〈TODO〉[図版:明朝体とゴシック体で「永」の文字を並べるなど、文字の具体的な形をイメージさせるもの]

## 関連項目

Expand Down
2 changes: 1 addition & 1 deletion terms/jitai.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

字体は、文字の具体的な形ではなく、文字の抽象的な骨組みのことです。たとえば、同じ「あ」という文字でも明朝体とゴシック体で文字の形は異なります。しかし私たちはどちらも「あ」という文字として認識します。これは「あ」の字体という概念として私たちの頭の中にあるためです。

[図版:ある文字を思い浮かべる人のイラストなど、文字の骨格という抽象概念を表現するもの]
〈TODO〉[図版:ある文字を思い浮かべる人のイラストなど、文字の骨格という抽象概念を表現するもの]

なお、印刷や画面表示などによって具体的に視覚化された文字の形を字形といいます。また、同じ読みと意味を持つ文字でも複数の字体をもつことがあり、これを異体字といいます。

Expand Down
6 changes: 3 additions & 3 deletions terms/mincho.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

## 用法

長文を読むのに適しているとされ、小説など書籍の本文の多くは明朝体を採用しています。ウェブにおいては、小さい文字サイズや低解像度のスクリーンで判別しづらいことがあったり、OSに高品位な明朝体フォントが搭載されていなかったことなどから、あまり利用されてきませんでした。しかし近年、スマートフォンをはじめ画面が高精細になり、またスクリーンに最適化されたフォントが多く開発されたことなどから、利用される場面が増えてきました。
長文を読むのに適しているとされ、小説など書籍の本文の多くは明朝体を採用しています。Webにおいては、小さい文字サイズや低解像度のスクリーンで判別しづらいことがあったり、OSに高品位な明朝体フォントが搭載されていなかったことなどから、あまり利用されてきませんでした。しかし近年、スマートフォンをはじめ画面が高精細になり、またスクリーンに最適化されたフォントが多く開発されたことなどから、利用される場面が増えてきました。

## 実践

ウェブで明朝体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`serif`キーワードも指定するとよいでしょう。
Webで明朝体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`serif`キーワードも指定するとよいでしょう。

```css
body {
Expand All @@ -21,4 +21,4 @@ body {
## 関連項目

- [セリフ体](./serif.md)
- [ゴシック体](./gothic.md)
- [ゴシック体](./gothic.md)
6 changes: 3 additions & 3 deletions terms/monospaced-font.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
## 等幅フォント

等幅フォント(monospaced font)または固定幅フォント(fixed-width font)は、すべてのグリフの幅が同じであるフォントを言います
等幅フォント(monospaced font)または固定幅フォント(fixed-width font)は、すべてのグリフの幅が同じであるフォントをいいます

[図版:等幅フォントとプロポーショナルフォントの比較]
〈TODO〉[図版:等幅フォントとプロポーショナルフォントの比較]

## 用法

コンピューターのソースコードを表示する場合に多く用いられます。また、タイプライター風の効果を狙って利用されることもあります。

## 実践

ウェブで等幅フォントを表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`monospace`キーワードも指定するとよいでしょう。
Webで等幅フォントを表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`monospace`キーワードも指定するとよいでしょう。

```css
pre, code, kbd, samp {
Expand Down
2 changes: 1 addition & 1 deletion terms/roman.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
## 関連項目

- [セリフ体](./serif.md)
- [イタリック](./italic.md)
- [イタリック](./italic.md)
6 changes: 3 additions & 3 deletions terms/sans-serif.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# サンセリフ体

サンセリフ体(sans-serif)は欧文書体の分類のひとつで、セリフのない書体を言います。日本語書体ではゴシック体が相当します。
サンセリフ体(sans-serif)は欧文書体の分類のひとつで、セリフのない書体をいいます。日本語書体ではゴシック体が相当します。

## 用法

字形が簡素であるため悪条件でも判読しやすいという特徴があり、駅や空港の案内板や道路標識など、公共のサインでも多く用いられています。ウェブにおいても、解像度の低いスクリーンや小さな文字サイズを考慮し、サンセリフ体が採用されることが多いようです。
字形が簡素であるため悪条件でも判読しやすいという特徴があり、駅や空港の案内板や道路標識など、公共のサインでも多く用いられています。Webにおいても、解像度の低いスクリーンや小さな文字サイズを考慮し、サンセリフ体が採用されることが多いようです。

## 実践

ウェブでサンセリフ体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`san-serif`キーワードも指定するとよいでしょう。
Webでサンセリフ体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`san-serif`キーワードも指定するとよいでしょう。

```css
body {
Expand Down
2 changes: 1 addition & 1 deletion terms/serif.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

## 実践

ウェブでセリフ体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`serif`キーワードも指定するとよいでしょう。
Webでセリフ体を表示するには、CSSの`font-family`プロパティで具体的なファミリー名を指定するとともに、フォールバックとして`serif`キーワードも指定するとよいでしょう。

```css
body {
Expand Down
4 changes: 2 additions & 2 deletions terms/typeface.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# 書体

書体(typeface)は、一定の様式でデザインされた字形の集合のことを言います。たとえばヘルベチカやヒラギノ明朝などがそうです。書体の分類として、日本語の明朝体やゴシック体、欧文のセリフ体やサンセリフ体などがあります。
書体(typeface)は、一定の様式でデザインされた字形の集合のことをいいます。たとえばヘルベチカやヒラギノ明朝などがそうです。書体の分類として、日本語の明朝体やゴシック体、欧文のセリフ体やサンセリフ体などがあります。

[図版:明朝体・ゴシック体・セリフ体・サンセリフ体などの代表的な字形]
〈TODO〉[図版:明朝体・ゴシック体・セリフ体・サンセリフ体などの代表的な字形]

## 関連項目

Expand Down
Loading

0 comments on commit 2388374

Please sign in to comment.