kbkt
タイポグラフィの考え方、歴史、事例、タイポグラフィのスキルを向上させるために今すぐできること、タイポグラフィの参考書籍、その他参考になる記事をまとめました。
【もくじ】
・タイポグラフィの考え方
・タイポグラフィの歴史
・美しいタイポグラフィの事例
・タイポグラフィのスキルを向上させるために今すぐできること
・タイポグラフィの参考書籍
・参考
タイポグラフィの考え方
フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。
基本的な選び方として知っておくと良いと思います。私は以下の順番でフォントを選んでいます。
1. フォントの系統選び
2. 選んだ系統から、さらに書体を選ぶ
3. 書体のウェイトを決める
4. 字間の調整
Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述 […]
タイポグラフィによって情報を伝える方法は、「文字を見せる」ことと「文字を読ませる」ことの2つに大別されます。
「見せる文字」は、しばしばキャッチコピーやロゴテキストに用いられ、ブランドイメージを伝えるための重要な役割を担っている。サイズ、カラー、フォント、ウェイト（文字の太さ）など、デザインすべき要素をうまく組み合わせることが、デザインクオリティを研ぎ澄ませ、ひいてはブランドイメージを向上させることに繋がる。
「読ませる文字」は本文や脚注などの文章に用いられるもので、情報を正確に伝える必要があるため、可読性・視認性に優れていなければなりません。
◆Webタイポグラフィのクオリティを上げる基本的な5つのTips
1. 文字間を詰める
2. 大きさ・位置を揃える
3. 動きを持たせる
4. 文字を変形させる
5. 行間と行長を調整する
タイポグラフィーデザインの基本、文字詰めなどから、レイアウト手法まで学んだことをまとめてみました。私はWebデザイナーなので、DTPデザインは苦手です。でも、ここで学んだことは、WebもDTPも関係なくデザインの幅を広げてくれる内容でした。主にタイポグラフィーのレイアウトについてです！
かなりボリュームのある内容。
１．視線の動きとデザイン
２．基本の基本、文字間について
３．目立たせる、目立たせないためのいろんな工夫
４．アクセントを使った工夫
５．いろんなタイポグラフィーレイアウトを見てみよう
CSS Nite LP, Disk 11「Designer’s High」Part 1でのセッション資料 講師：鷹野雅弘（スイッチ） http://lp11.cssnite.jp/
スライドでの説明資料なので、さくさく読める。
タイポグラフィに関する用語の説明、タイポグラフィの歴史、タイポグラフィごとに与える印象の違いなどがシンプルに説明されていて、とても参考になる。
・ひらがな、カタカナは原則として詰める
・句読点などの記号も詰める
・括弧は一番細いフォントを選ぶ
・単位は小さな文字サイズにする
・助詞は一回り小さいフォントサイズにする
タイポグラフィの歴史
日本語フォント、5つの物語。 ツイート 2012年05月15日 日本語フォント5書体（MS、ヒラギノ、リュウミン、新ゴ、小塚）の制作秘話、歴史などについて調べてみました。 英字書体7つの物語もあります。ぜひご覧ください。 via 英字フォント、7つの物語。 | Love&pointcard MSファミリー MS PゴシックやMS P明朝などの総称が分からないのでMSファミリーと題しました。 そ…
英字フォント、7つの物語。 ツイート 2012年05月08日 HelveticaやGeorgiaなど、デザイナーなら誰もが知る有名フォントの逸話などを調べてみました。ちなみに、この記事のタイトル画像ではHigh Tower Textというフォントを使用しています。後日、日本語フォント物語を公開予定。 > この記事の情報は日本語版および英語版Wikipedia、その他インターネット上の情報を元…
美しいタイポグラフィの事例
タイポグラフィを用いた、素晴らしいデザインインスピレーションを与えてくれるアートな34作品。文字を基盤とした、素晴らしいデザインイメージばかりです。
Apple Gazette Your Ultimate Guide to Thinking Differently Home Contact Directory Archives Get Featured Advertise Directory & Tracker iPad iPhone Mac Tutorials Games Reviews This Week on Kickstarter (…
Appleが使用しているフォントのまとめ
手書き風の日本語フォントからゴシック系、明朝系など、フリーで使える日本語フォントを集めました。※商用利用もできる日本語フォントを中心にまとめておりますが、その限…
タイポグラフィのスキルを向上させるために今すぐできること
まずは様々な事例を見て、タイポグラフィから得られる情報に違いがあることを学びましょう。
□ ターゲットユーザーの違うWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 同じジャンルのWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 普段Webサイトを閲覧するときにも、タイポグラフィを意識して見るようにする
Webデザイナーなら知っておきたいWebタイポグラフィの基本 | FICC inc.
タイポグラフィの参考書籍
参考
その他、タイポグラフィを学ぶ上で参考になる記事。
もくじ
フォントに関する知識
１．字間
２．行間
３．字詰め
４．文字組
５．ジャンプ率
６．余白／図版率
７．メリハリをつける
８．書体
９．読みやすいフォントサイズ
１０．見やすい文章
１１．Webフォント
スライド
１２．フォントに関するスライド
2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナーTypeTalks第10回「もっと知りたい！Webフォント」の�
1. Webフォントとは？
2. Webフォントの今
3. Webフォントの課題
4. フォントブログのWebフォント
5. 本日のまとめ– 海外サイトのWebフォント考察
webにかかわる人も、そうで無い人もデザインにかかわる全てのクリエイターなら、一度は通る道が、タイポグラフィデザインです。文字、いわゆるテキストさえもデザインする事で、デザインの幅は大きく広がります。今回はそうしたクリエイターに送る資料としてホットでクリエイティブなタイポグラフィ作品をまとめました。また、これからタイポグラフィについて記事を書こうと思った方の資料として使っていただければという思い…
マンガの方で近況告知中！ Tweet カテゴリを選択 WEBサービス系 技術系 まとめ系 考察系 ナビゲーションを開く 人気記事一覧 セナのオススメ お知らせ WEB制作レッスン 僕について 留学相談 お問い合わせ 『文字／タイポグラフィ』を知る、学ぶ、見る、活用する、作る！様々な場面で役立つサイト達の大まとめ！ 2012年2月17日 フォント／タイポグラフィ Tweet 今やタイポグラフィを …
英語のタイポグラフィについて参考になるサイトのまとめ
PHP/Ajax/JavaScript/CSS/デザイン等のWEB開発に関する最新技術情報をお届け –> 前の記事 ≪： 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 次の記事 ≫： 仕事中に、つい見てしまうサイトを見れないようにする簡単な仕組み タイポグラフィに使える20の便利ツール集 2009年03月24日- スポンサード リンク 20 Useful Typography Tools…
SwapSkills LINK TALK あのクリエイターのアイディアや現場でのディレクション力などWebに関わる人々のこだわりや思いを伺う番組です。普段会う事ができない人達を動画や音声、テキストを通してどんな人々がウェブに関わって作り出されているのかをご紹介しています。 powered by allWebクリエイター塾 facebook twitter swapskills ARCHIVES …
https://matome.naver.jp/odai/2137320754987327701
2013年11月02日
