#author("2020-10-13T12:12:27+09:00;2019-07-05T20:51:22+09:00","default:inoue.ko","inoue.ko") #author("2020-10-19T17:20:44+09:00;2020-10-13T12:12:27+09:00","default:inoue.ko","inoue.ko") *タイポグラフィー ~ タイポグラフィーとは、一般に文字による表現全般、またはその技法のことを言います。可読性や視認性はもちろん、書体、ウェイト、行間（レディング）、字間（カーニング）、そして全体のレイアウト文字に関わるデザイン要素を総合的にデザインする技術が求められます。 タイポグラフィーとは、一般に文字による表現全般、またはその技法のことを言います。現在では「文字を読みやすく、美しく配置すること」と「文字をデザイン要素として用いる手法」という２つの意味で使われています。 可読性や視認性はもちろん、書体、ウェイト、行間（レディング）、字間（カーニング）、そして全体のレイアウト文字に関わるデザイン要素を総合的にデザインする技術が求められます。 -[[GoogleImage:タイポグラフィー]] -[[活字>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 ) こども向け：12pt ( ≒16Q ) ~ ***字間と行間 -文字と文字の間を「字間」、文字の中心間の距離を「字送り」 和文の書籍では、字間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]] [[Wikipedia: OpenType]] ''補足''：フォントのアウトライン化について -編集可能な文字列情報を、フォントのアウトラインデータによって、図形として編集可能なパスに置き換えること。 -作業環境によってフォントデータの有無が異なるため、例えば印刷所へデータ入稿の際は、すべての文字をアウトライン化するのが一般的。 -ビットマップフォント 文字の形を 16 x 16、24 x 24 といった画素配列で定義した文字画像データで、拡大するとガタガタになるものです。現在は使われることはありません。 ~ ***Webフォント 記事を独立させました ＞ [[WebFonts]] -[[Googleフォント>https://fonts.google.com/]] -[[Google日本語フォント>https://googlefonts.github.io/japanese/]] ~ ***代表的なフォントメーカー -[[アドビシステムズ>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%A9%E3%83%B3%E3%83%88]] -[[TrueType>http://ja.wikipedia.org/wiki/TrueType]] -[[PostScript>http://ja.wikipedia.org/wiki/PostScript%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88]] -[[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&q=%E6%B4%BB%E5%AD%97&gbv=2&aq=f&aqi=g1&aql=&oq=&gs_rfai=]] -[[写植>http://www.google.co.jp/images?hl=ja&gbv=2&tbs=isch%3A1&sa=1&q=%E5%86%99%E6%A4%8D&btnG=%E6%A4%9C%E7%B4%A2&aq=f&aqi=&aql=&oq=&gs_rfai=]] -[[SPREAD｜the bookshelf for typography and graphic>http://page-spread.com/]] -[[Karl gerstner>GoogleImage: Karl gerstner]] -[[Helmut Schmid>GoogleImage: Helmut Schmid Typography]] -[[桑山弥三郎>http://images.google.co.jp/images?hl=ja&lr=&rlz=1G1GGLQ_JAJP288&um=1&sa=1&q=%E6%A1%91%E5%B1%B1%E5%BC%A5%E4%B8%89%E9%83%8E&btnG=%E7%94%BB%E5%83%8F%E6%A4%9C%E7%B4%A2&aq=f&oq=]] -[[Google:フォント フリー]] -[[Google:Webフォント フリー]] -[[フォントフリー>http://fontfree.me/]] -[[フォントブログ>http://www.petitboys.com/design/mt/]] -[[フリーフォント最前線>http://www.akibatec.net/freefont/]] -[[FONTS2Uオンラインコンバータ>http://ja.fonts2u.com/]] フォントの形式変換が可能です。 -[[Webフォント>http://www.google.co.jp/search?source=ig&hl=ja&rlz=1G1GGLQ_JAJP288&=&q=web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88&aq=0r&aqi=g-r5&aql=&oq=Web%E3%81%B5%E3%81%89%EF%BD%8E&gs_rfai=]] -[[Google Font Dictionary>http://code.google.com/webfonts]] -[[Google Font API>http://code.google.com/apis/webfonts/docs/getting_started.html]] -[[Google Font API｜書体のプレビュー>http://code.google.com/webfonts/preview]] -[[Typographic Systems Kimberly Elam>http://www.amazon.co.jp/exec/obidos/ASIN/4861005140/webdesignrecipes-22/ref=nosim/]] ~ ~