Typography
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*タイポグラフィー
~
タイポグラフィーとは、一般に文字による表現全般、またはそ...
可読性や視認性はもちろん、書体、ウェイト、行間(レディ...
-[[GoogleImage:タイポグラフィー]]
-[[活字>GoogleImage:活字]]、[[写植>GoogleImage:写植]]、[[...
~
**組版
組版とは、文字を一定の規則に並べ、印刷用の体裁を整えるこ...
~
***縦組・横組
-日本の文字組には縦組みと横組みがあります。
-したがって、正方形ベースでデザインされた文字が多い
-一行あたりの最適な文字数は・・
--横組:18 - 30字/行
--縦組:15 - 40字/行
-和欧混植では、横組、連数字には1バイト欧文、縦組には2バイ...
~
***文字サイズ
文字のサイズとは 文字を囲む「仮想ボディー」の大きさです。
-ポイント 1pt = 1/72 inch = 0.3528mm > 72pt = 1inch
アメリカンポイント(JIS) = 0.3514
ディドーポイント(ヨーロッパ) = 0.3759
-級と歯 1Q = 1H = 0.25mm > 4Q=1mm 12Q=3mm
-emとは 全角一文字分のサイズ 活字の大文字Mに由来
-enとは 半角一文字分のサイズ
~
***文字サイズの目安
小説などの本文は・・ 一般:9pt ( ≒13Q ) こども向け:12...
~
***字間と行間
-文字と文字の間を「字間」、文字の中心間の距離を「字送り」
和文の書籍では、字間0の「ベタ組み」が基本
-行と行の間を「行間」、中心から次の行の中心までの距離を「...
行間は、一般に文字サイズの 2/3 ~ 3/3 が一般的
//行間が狭いと読みづらくなります。行間0 はあり得ません(...
-カーニング
文字間の調整 単位は、em : 1/1000 文字 (100em= 1/10 文...
-トラッキング
複数文字の間隔の一律調整 単位は em
-行揃え
左(頭)揃え / センタリング / 右揃え / 行頭行末揃え / 強制...
通常は、行頭行末揃え(ジャスティファイ・箱組)
~
***禁則処理
日本語の組版では、約物が行頭にあってはいけません。
それらを回避するための字詰め等の処理を総称して禁則処理と...
一般に、日本語に対応したソフトウエアでは自動的に処理され...
~
***約物とは
文章記述に使用する記号の総称。句読点・疑問符・括弧などの...
~
~
**フォント
フォントとは一般に、同サイズ、同デザインの活字の一揃いの...
現在では、アウトラインがデジタル化された文字セットを指し...
***書体とフォント
-書体:同じデザイン要素をもつ文字の集まり
--和文の場合 明朝、ゴシック、丸ゴシック、楷書・・
--欧文の場合 ローマン、サンセリフ、スクリプト・・・
-フォント:書体を印刷用にデータ化したもの
~
***明朝体とゴシック体 / セリフ体とサンセリフ体
-和文では、ウロコのあるものを明朝体、ないものをゴシック体...
-欧文では、セリフのあるものをセリフ体、ないものをサンセリ...
&small(ウロコもセリフも、筆やペンで書かれていた時代の名残...
~
***読ませる文字 と 見せる文字
-セリフ系は「可読性」にすぐれる >「読ませる文字」
-サンセリフ系は「視認性・誘目性」にすぐれる >「見せる文...
注)Webの場合は少し様子が違います。
パソコンのディスプレイではドット数が足りないため、セリフ...
~
***等幅とプロポーショナル
-文字の幅がすべて同一にデザインされたものが等幅フォント
-文字ごとに幅が最適化されたものがプロポーショナルフォント
~
***ウエイト
文字の太さ、肉厚のことです。EL L R M B H など
~
***デジタルフォント
-アウトライン(スケーラブル)フォント
--文字の形状が端点と制御点で曲線定義されたもので、劣化な...
//※かつてはビットマップフォントも多用されていました。
--True Type / Postscript / Open Type
アウトラインフォントのタイプです。
[[Wikipedia: TrueType]] [[Wikipedia: PostScript]] [[Wik...
''補足'':フォントのアウトライン化について
-編集可能な文字列情報を、フォントのアウトラインデータによ...
-作業環境によってフォントデータの有無が異なるため、例えば...
-ビットマップフォント
文字の形を 16 x 16、24 x 24 といった画素配列で定義した文...
~
***Webフォント
記事を独立させました > [[WebFonts]]
-[[Googleフォント>https://fonts.google.com/]]
-[[Google日本語フォント>https://googlefonts.github.io/jap...
~
***代表的なフォントメーカー
-[[アドビシステムズ>http://www.adobe.co.jp/]]
-[[イワタ>http://www.iwatafont.co.jp/]]
-[[Emigre>http://www.emigre.com/]]
-[[視覚デザイ ン研究所>http://www.vdl.co.jp/vdl/]]
-[[写研>http://ja.wikipedia.org/wiki/%E5%86%99%E7%A0%94]]
-[[字游工房>http://www.jiyu-kobo.co.jp/home.html]]
-[[ダイナコムウェア>http://www.dynacw.co.jp/]]
-[[日本活字工業>http://www.sun-inet.or.jp/%7Entftokyo/]]
-[[フォントワークス>http://www.fontworks.co.jp/]]
-[[モリサワ>http://www.morisawa.co.jp/]]
-[[リョー ビイマジクス>http://www.ryobi-group.co.jp/]]
~
***付記:機種依存文字について
機種依存文字とは、文字変換の際に警告マークが出る文字のこ...
[[Google:機種依存文字 一覧]]
~
~
**参考LINK
-[[フォント>http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%...
-[[TrueType>http://ja.wikipedia.org/wiki/TrueType]]
-[[PostScript>http://ja.wikipedia.org/wiki/PostScript%E3%...
-[[OpenType>http://ja.wikipedia.org/wiki/OpenType]]
-[[書体>http://ja.wikipedia.org/wiki/%E6%9B%B8%E4%BD%93]]
-[[活字>http://www.google.co.jp/images?hl=ja&source=imghp...
-[[写植>http://www.google.co.jp/images?hl=ja&gbv=2&tbs=is...
-[[SPREAD|the bookshelf for typography and graphic>http:...
-[[Karl gerstner>GoogleImage: Karl gerstner]]
-[[Helmut Schmid>GoogleImage: Helmut Schmid Typography]]
-[[桑山弥三郎>http://images.google.co.jp/images?hl=ja&lr=...
-[[Google:フォント フリー]]
-[[Google:Webフォント フリー]]
-[[フォントフリー>http://fontfree.me/]]
-[[フォントブログ>http://www.petitboys.com/design/mt/]]
-[[フリーフォント最前線>http://www.akibatec.net/freefont/]]
-[[FONTS2Uオンラインコンバータ>http://ja.fonts2u.com/]] ...
-[[Typographic Systems Kimberly Elam>http://www.amazon.c...
~
~
終了行:
*タイポグラフィー
~
タイポグラフィーとは、一般に文字による表現全般、またはそ...
可読性や視認性はもちろん、書体、ウェイト、行間(レディ...
-[[GoogleImage:タイポグラフィー]]
-[[活字>GoogleImage:活字]]、[[写植>GoogleImage:写植]]、[[...
~
**組版
組版とは、文字を一定の規則に並べ、印刷用の体裁を整えるこ...
~
***縦組・横組
-日本の文字組には縦組みと横組みがあります。
-したがって、正方形ベースでデザインされた文字が多い
-一行あたりの最適な文字数は・・
--横組:18 - 30字/行
--縦組:15 - 40字/行
-和欧混植では、横組、連数字には1バイト欧文、縦組には2バイ...
~
***文字サイズ
文字のサイズとは 文字を囲む「仮想ボディー」の大きさです。
-ポイント 1pt = 1/72 inch = 0.3528mm > 72pt = 1inch
アメリカンポイント(JIS) = 0.3514
ディドーポイント(ヨーロッパ) = 0.3759
-級と歯 1Q = 1H = 0.25mm > 4Q=1mm 12Q=3mm
-emとは 全角一文字分のサイズ 活字の大文字Mに由来
-enとは 半角一文字分のサイズ
~
***文字サイズの目安
小説などの本文は・・ 一般:9pt ( ≒13Q ) こども向け:12...
~
***字間と行間
-文字と文字の間を「字間」、文字の中心間の距離を「字送り」
和文の書籍では、字間0の「ベタ組み」が基本
-行と行の間を「行間」、中心から次の行の中心までの距離を「...
行間は、一般に文字サイズの 2/3 ~ 3/3 が一般的
//行間が狭いと読みづらくなります。行間0 はあり得ません(...
-カーニング
文字間の調整 単位は、em : 1/1000 文字 (100em= 1/10 文...
-トラッキング
複数文字の間隔の一律調整 単位は em
-行揃え
左(頭)揃え / センタリング / 右揃え / 行頭行末揃え / 強制...
通常は、行頭行末揃え(ジャスティファイ・箱組)
~
***禁則処理
日本語の組版では、約物が行頭にあってはいけません。
それらを回避するための字詰め等の処理を総称して禁則処理と...
一般に、日本語に対応したソフトウエアでは自動的に処理され...
~
***約物とは
文章記述に使用する記号の総称。句読点・疑問符・括弧などの...
~
~
**フォント
フォントとは一般に、同サイズ、同デザインの活字の一揃いの...
現在では、アウトラインがデジタル化された文字セットを指し...
***書体とフォント
-書体:同じデザイン要素をもつ文字の集まり
--和文の場合 明朝、ゴシック、丸ゴシック、楷書・・
--欧文の場合 ローマン、サンセリフ、スクリプト・・・
-フォント:書体を印刷用にデータ化したもの
~
***明朝体とゴシック体 / セリフ体とサンセリフ体
-和文では、ウロコのあるものを明朝体、ないものをゴシック体...
-欧文では、セリフのあるものをセリフ体、ないものをサンセリ...
&small(ウロコもセリフも、筆やペンで書かれていた時代の名残...
~
***読ませる文字 と 見せる文字
-セリフ系は「可読性」にすぐれる >「読ませる文字」
-サンセリフ系は「視認性・誘目性」にすぐれる >「見せる文...
注)Webの場合は少し様子が違います。
パソコンのディスプレイではドット数が足りないため、セリフ...
~
***等幅とプロポーショナル
-文字の幅がすべて同一にデザインされたものが等幅フォント
-文字ごとに幅が最適化されたものがプロポーショナルフォント
~
***ウエイト
文字の太さ、肉厚のことです。EL L R M B H など
~
***デジタルフォント
-アウトライン(スケーラブル)フォント
--文字の形状が端点と制御点で曲線定義されたもので、劣化な...
//※かつてはビットマップフォントも多用されていました。
--True Type / Postscript / Open Type
アウトラインフォントのタイプです。
[[Wikipedia: TrueType]] [[Wikipedia: PostScript]] [[Wik...
''補足'':フォントのアウトライン化について
-編集可能な文字列情報を、フォントのアウトラインデータによ...
-作業環境によってフォントデータの有無が異なるため、例えば...
-ビットマップフォント
文字の形を 16 x 16、24 x 24 といった画素配列で定義した文...
~
***Webフォント
記事を独立させました > [[WebFonts]]
-[[Googleフォント>https://fonts.google.com/]]
-[[Google日本語フォント>https://googlefonts.github.io/jap...
~
***代表的なフォントメーカー
-[[アドビシステムズ>http://www.adobe.co.jp/]]
-[[イワタ>http://www.iwatafont.co.jp/]]
-[[Emigre>http://www.emigre.com/]]
-[[視覚デザイ ン研究所>http://www.vdl.co.jp/vdl/]]
-[[写研>http://ja.wikipedia.org/wiki/%E5%86%99%E7%A0%94]]
-[[字游工房>http://www.jiyu-kobo.co.jp/home.html]]
-[[ダイナコムウェア>http://www.dynacw.co.jp/]]
-[[日本活字工業>http://www.sun-inet.or.jp/%7Entftokyo/]]
-[[フォントワークス>http://www.fontworks.co.jp/]]
-[[モリサワ>http://www.morisawa.co.jp/]]
-[[リョー ビイマジクス>http://www.ryobi-group.co.jp/]]
~
***付記:機種依存文字について
機種依存文字とは、文字変換の際に警告マークが出る文字のこ...
[[Google:機種依存文字 一覧]]
~
~
**参考LINK
-[[フォント>http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%...
-[[TrueType>http://ja.wikipedia.org/wiki/TrueType]]
-[[PostScript>http://ja.wikipedia.org/wiki/PostScript%E3%...
-[[OpenType>http://ja.wikipedia.org/wiki/OpenType]]
-[[書体>http://ja.wikipedia.org/wiki/%E6%9B%B8%E4%BD%93]]
-[[活字>http://www.google.co.jp/images?hl=ja&source=imghp...
-[[写植>http://www.google.co.jp/images?hl=ja&gbv=2&tbs=is...
-[[SPREAD|the bookshelf for typography and graphic>http:...
-[[Karl gerstner>GoogleImage: Karl gerstner]]
-[[Helmut Schmid>GoogleImage: Helmut Schmid Typography]]
-[[桑山弥三郎>http://images.google.co.jp/images?hl=ja&lr=...
-[[Google:フォント フリー]]
-[[Google:Webフォント フリー]]
-[[フォントフリー>http://fontfree.me/]]
-[[フォントブログ>http://www.petitboys.com/design/mt/]]
-[[フリーフォント最前線>http://www.akibatec.net/freefont/]]
-[[FONTS2Uオンラインコンバータ>http://ja.fonts2u.com/]] ...
-[[Typographic Systems Kimberly Elam>http://www.amazon.c...
~
~
ページ名: