文字サイズの比率と調和
ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
下書きなしで？！大阪の看板職人の技「ブッツケ書き」を喰らえ
この記事は総合就業支援拠点『OSAKAしごとフィールド』が、さまざまな業界の魅力をみなさんにお伝えするための、業界魅力発信記事です。OSAKAしごとフィールドでは、キャリアカウンセリング・セミナーの開講などのサービスも実施しております。就職活動のヒントにぜひご活用ください。（全て無料・要登録） OSAKAしごとフィールドについてはこちら 突然ですが、クイズです。上の画像の文字は、ある1文字を除いて全てが手書きになっています。しかも、下書きをしないで「筆で一発勝負」で書かれた文字なんです。 この文字を書いたのは、大阪府の泉州地域に住んでいる2人の看板職人。上林修さんとの板倉賢治さんです。
なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半
超初心者のための文字組入門（追記あり） #moji_for_webya - Suikolog
このエントリは#LOVEFONT Advent Calendar 2014 への参加エントリです。好きなフォントについて語るブログ・アドベントカレンダーではあるのですが、失礼して「フォントの使い方」に解釈を広げてお送りいたします。 このエントリを書く理由 JUSO Coworkingで9月から11月にかけて、私が企画し開催した「ウェブ世代のデザイナーのための文字組入門 第一回・Illustrator / Photoshop 文字組一日集中入門」。「文字組みに関する知識ゼロのウェブデザイナーであっても受講でき、理解できる基礎講座を開きたい」という願いから、組版屋の大石十三夫氏（はあどわあく・なんでやねんDTP）を講師としてお迎えし、実現したものでした。 この講座を開催した理由はいろいろありますが、ひとつは文字組みを知らぬままデザイナーになってしまった私が勉強してみたいから、ということでした。
Webデザインにおけるタイポグラフィの考察 | ノート | dotgraphy
2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド 工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ
基礎の基礎。新人webデザイナーにオススメしたいデザイン関連書籍7冊！｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 新年度に入り、新たにwebデザイナーとしてキャリアをスタートした方もいることでしょう。今回は、そんな新人の方にオススメしたい書籍をご紹介したいと思います。 （書籍名のリンク先はAmazonになります） デザイン編 How to Design いちばん面白いデザインの教科書 本書は、グラフィックデザインの現場で必要になる知識と考え方、それを形にするためのアプリケーションの技術の両方を、実践的なプロセスでわかりやすく解説したデザインの教科書です。 東京造形大学で教鞭をとるカイシトモヤが、デザイナーとして、また教員として培ってきた現場のリアルなデザインをこの一冊にまとめました。 webというよりはグラフィックデザイナー向けですが、その分、デザインに関して基本からしっかりと解説されており、体系的に学べる内容です。 「形」「色」「文字」「写真」「レイアウト」「印刷
明朝体は絶滅するのか？ AXIS Font生みの親の挑戦
「明朝体はこのままだとあと20年もすればこの世から消えてしまうかもしれない」。独立系フォントベンダーであるタイププロジェクト社長の鈴木功さんはそう語る。鈴木さんはタイプデザイナーであり、デザイン業界で評価の高いAXIS Fontの生みの親として知られる人物だ。 事実、明朝体を目にする機会は激減している。PCのWebブラウザーはもちろん、スマートフォン、タブレットといったデバイスの基本フォントはいずれもゴシック体。ニュースは新聞ではなくニュースサイトやアプリでチェックし、知りたいことは本ではなくググるかFacebookで尋ねる時代。紙媒体ですら、ゴシック体で堂々と本文を組む書籍が増えた。私自身、Web業界の経験が長い新人編集者に、明朝体で組まれた新刊のゲラを「なんか読みづらい」と言われてしまった経験がある。 「気持ちが悪い」から始まった、明朝体の居場所作り 6年前。鈴木さんには忘れられないエ
CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
Webデザイナーなら知っておきたいWebタイポグラフィの基本 | FICCナレッジブログ | FICC
Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述べています。 私たちの行動は文字によって喚起されます。例えば、オンラインショッピングをするときに、商品のイメージだけで購入することはほとんどないのではないでしょうか。価格をはじめ、特徴や仕様、レビューなど、文字が伝える情報を咀嚼して購買を決定しているはずです。オンラインショップは実店舗とは違い、商品を手にとって確認することができませんから、文字から伝わる情報がより重要性を増すのです。 これらは、タイポグラフィのデザインがWebデザインにとって無くてはならない役割を担っている証拠だと言えるでしょう。 それで
美しく文字を組む
タイポグラフィとは Webデザインの世界では、デザイン教育を受けたことがないデザイナーが大勢います。始めたきっかけはHTMLの勉強からだったり、もともとプログラマーだったりと、その背景はさまざまです。これはWebが、プログラムや動画など、ほかのメディアよりもジャンルの要素が多いためではないでしょうか。 筆者も同じく学生時代にデザインの教育は受けていません。デザイン会社の現場で、実践とともにデザインを学んできました。しかし、デザインの仕事を始めてからスキルアップのため、重要性・必然性にかられて正式に学んだものの1つにタイポグラフィがあります。 タイポグラフィとは、デザインの中で文字を扱う技術、もしくは文字にかかわる知識・学術のことを指します。例えば、レイアウトを行う際に、美しい書体を選択することや、字間のバランスを整えて、読みやすさと視認性を高める技術がこれに該当します。 現在の商業デザイン
「ウェブ時代のデザイナーのための文字組入門 」に参加してきました - デザイナーのイラストノート
JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マンガ文字素材dddFont – 漫画的表現ができる素材をドドドっとストック
『ギリシャ文字・キリル文字・ラテン文字』 - にせねこメモ
活版印刷の文字のにじみを再現した「にじみフォント」、大日本印刷が開発 
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
https://503dg.jp/mojigumi-nyu-mon/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Basic Design Note
ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ | コリス
和文フォント大図鑑 [フォントの基礎知識]![和文フォント大図鑑 [フォントの基礎知識]](https://cdn-ak-scissors.b.st-hatena.com/image/square/587e9352deb1375c28ff484f1eae09253e6b162f/height=288;version=1;width=512/https%3A%2F%2Fwww.google.com%2Flogos%2Fdoodles%2F2018%2Fwinter-solstice-2018-northern-hemisphere-5609689915064320-2xa.gif)
