『文字／タイポグラフィ』を知る、学ぶ、見る、活用する、作る！様々な場面で役立つサイト達の大まとめ！ | バンクーバーのうぇぶ屋
今やタイポグラフィを見る、学ぶ、知る、活用する、作る。それらすべてのことが様々なサイトやツールを使って実現することが可能です。 ここ1ヶ月くらい、僕のFacebookで投稿させて頂くネタ／書かせて頂く記事の内容がタイポグラフィに偏っていたのですが、実はちょっとタイポグラフィに関するお話をさせて頂く機会があったので、ずーーっと調べていました。 それこそ、作ってみたり、動画みたり、チュートリアル見たり…あれやこれやとまぁ、よくやったわと自分で自分を褒めてみたり… とは言っても、僕はタイポグラフィを学校や専門で勉強したことは無いので、その辺りは別の人にお話頂き、僕はとにかくWEB上での活用、情報収集面に注力させて頂いたのですが、本当に色々あってびっくら仰天。 とういわけで、今日はその時話しさせてもらった内容を。あーんど！僕が以前からお世話になっている物を加えてご紹介！ かなり、がっつりしたボリュ
ポスターなどでのタイトルの文字の調整の実際｜DTP Transit
年に一回、担当させていただいている多摩美術大学 デザイン学科向けの「Illustrator/Photoshop」セミナーを5月9日、10日に終了しました。 そのフォローアップ的な記事です。 なお、この素材は『Illustrator CS4 完全制覇パーフェクト』のものです。 日付 日付における年月日の文字や曜日、また、金額などの単位（円とかkmとか）は少し軽くしてメリハリをつけた方が、情報として文字列の内容を理解しやすくなります。 "打ちっ放し" 年月日や曜日が少し"重い"のでフォントサイズを下げました。 Illustrator CS以降は［文字］パレットメニューから［文字揃え］を「中央」から「欧文ベースライン」に変更しておくこと。 パーレン（丸括弧）を削除し、水、金をそれぞれ異体字切り替えで記号にします。 異体字切り替えを行うには、まず、［書式］メニューの［字形］をクリックして、［字形］
連載『嘘じゃない、フォントの話』(supported by モリサワ) 第10回：文字が動き出す。ー「組版」の世界ー | CINRA
『嘘じゃない、フォントの話』 連載『嘘じゃない、フォントの話』(supported by モリサワ) 第10回：文字が動き出す。ー「組版」の世界ー 突然ですが、書籍や雑誌で長文が並んでいる様を思い出してみてください。ページ一面にビッシリと並ぶ文字。本によって、文字の大きさや使われているフォントも様々です。たとえば子ども用の絵本であれば、大きくて優しい文字が１ページにゆったりと組まれていることが多く、反対に新聞ではところ狭しと堅そうな文字が並んでいます。今回の連載では、文章の読みやすさや性格を生み出している「文字組み＝組版」の世界を紹介します。 単語と単語の間にスペースがある英語と違い、日本語は切れ目が無く、文字で埋め尽くされています。それではなぜ、文字で埋め尽くされたページを長時間読み続けることができるのか。そこには、文字情報を人に伝達するために生まれた「組版」のノウハウが詰まっています。
美しく文字を組む
タイポグラフィとは Webデザインの世界では、デザイン教育を受けたことがないデザイナーが大勢います。始めたきっかけはHTMLの勉強からだったり、もともとプログラマーだったりと、その背景はさまざまです。これはWebが、プログラムや動画など、ほかのメディアよりもジャンルの要素が多いためではないでしょうか。 筆者も同じく学生時代にデザインの教育は受けていません。デザイン会社の現場で、実践とともにデザインを学んできました。しかし、デザインの仕事を始めてからスキルアップのため、重要性・必然性にかられて正式に学んだものの1つにタイポグラフィがあります。 タイポグラフィとは、デザインの中で文字を扱う技術、もしくは文字にかかわる知識・学術のことを指します。例えば、レイアウトを行う際に、美しい書体を選択することや、字間のバランスを整えて、読みやすさと視認性を高める技術がこれに該当します。 現在の商業デザイン
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
タイポグラフィの基礎 – 文字の扱いで印象が変わる - - EC studio デザインブログ
こんにちは。新免です。 普段から私たちは沢山の文字を目にする機会があります。 文字は身の回りに溢れており、私たちに様々な情報や 印象を与えてくれます。 文字はただ読み物として情報を伝えるだけではなく、 文字をデザインに落とし込むことで様々な印象を 与えることになります。そのため、デザインをする上で 文字の扱は非常に気をつけなければいけません。 そこで今回は、文字の扱い方で気をつけていることの 基本的な部分をまとめてみようと思います。 フォントの統一 フォントは和文フォントの中に「明朝体」「ゴシック体」、 欧文フォントの中にも「セリフ体」「サンセリフ体」という種類があり、 その中にも様々なフォントがあり、選ぶのに迷ってしまうほどです。 ただし、いろんな種類のフォントがあるからといって、異なるフォントを 多数使ってしまうと、イメージに違和感が出てしまいます。 フォントは作るビジュアルの雰囲気に
Illustratorで文章を扱うとき（文字組版） - DTP Transit
Illustratorで文章を扱うとき、矩形エリアに文字を流し込んだままではなく、次の4点は、最低限設定します。 行送りの設定 均等配置（行頭行末揃え／ジャスティファイ） 禁則 文字組み（約物前後や和欧間のスペースの設定） 逆を言えば、Illustratorではポイントテキスト（文字ツールでクリックして入力したテキストオブジェクト）を前提としています。 デフォルトの［行送り］は、文字サイズの175％に設定されています。「（14.4pt）」のように（）付きで表示されているときには「自動」行送りになっています。1行あたりの文字数に応じて調整します。 CS以前のIllustratorや、バージョン互換を行ったドキュメントによっては自動行送りが欧文に準じた120%になってしまいます。120%では行送りは狭すぎます。日本語では150-190%程度に設定します。 ［段落］パネルの［均等配置（最終行左揃
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
