[B! 文字] lion_7326のブックマーク

小さいかもしれないし、大きいかもしれない

人々は何を基準にしてウェブサイトの文字サイズを大きいか小さいか判断しているのだろうか。文字サイズについて扱う記事では、視力や年齢などの生物的な条件や、描画領域や機器そのもののサイズや機器との距離などの物理的な条件が挙げられることが多い。しかし実際には普段よく見るウェブサイトの文字サイズに引きずられる。文字の大小は印象に過ぎず、人は大きさを比較することでその印象を決定しているからだ。定期的に話題になる「今は文字サイズがこのくらいだと読みやすい」という論理は決定的に成り立つ。目と機器というそれぞれ論理的に分解できるものだけが文字サイズと関係をもつからだ。もしかすると近いうちに目の状態(を反映させた機器の設定)と機器のサイズや重さなどを変数として文字サイズを決定できる数式が出てき、CSSで定義できるようになるかもしれない。だがそのこととユーザーがどう感じるかは別の問題になってしまう。実際にウ

lion_7326 2017/05/23

リンク

Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。デバイスのdpiによる見え方このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

lion_7326 2017/05/17

リンク

http://azarashic.net/font-size-woman/

lion_7326 2017/01/11

リンク

ウェブ組版は行間が基準なのではという話 - note

以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ

lion_7326 2016/05/11

リンク

CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？フォントのサイズ指定のためのビューポートの使い方他の文字の要素をビューポートで指定縦のリズムとモジュラースケールをビューポートで指定フォントサイズの指定の精度をアップするさらに精

lion_7326 2016/03/24

リンク

わたしのデザインセオリー（写真マスク編） - デザイナーのイラストノート

この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること　Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・！デザインに写真を使うときにわたしがよくしていること「デザインセオリー」というと「これをやればデザインはOK！」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。グラデーションマスクにこだわってみるメインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。

lion_7326 2015/12/12

リンク

タイポグラフィが苦手な人におすすめしたい私のやり方

東京都でフリーランスデザイナーをしているイシジマミキのブログです。制作実績やその作り方とか。あと運営しているコワーキングスペース「こけむさズ」に関して。書評などのレビューもします。 ※タイトルを「文字のビジュアルデザインをするのには優先順位から」→「タイポグラフィが苦手な人におすすめしたい私のやり方」に変更しました。タイトルを考えてくださったhttp://handywebdesign.net/のなかふじさん、ありがとうございますー！タイポグラフィーとかロゴデザインとかそれ以外にも文字をデザインする機会は多いと思います。というかDTPですとこっちのが日常的に行われますね。Webデザインでも最近Webフォントなどが出てきたことでよりフォントがいろいろ使えるようになり表現力が上がりました。Web系の人にはあまり使われない内容かもしれませんが、覚えておくと良いよー。ということで普段自分のやってい