Don't Use Em for Media Queries
Software developer, author, and host of Full Stack Radio. November 30, 2017 Update: It looks like the bug in Safari has been fixed in Safari 15, so I wholeheartedly recommend using em for media queries now. Keeping the post up for historical reasons, but the conclusion is no longer valid. In March 2016, Zell Liew published a really great in-depth post titled "PX, EM, or REM Media Queries?", where
[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks
CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。 レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。 「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。 検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとは ビュー
![[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa274fa204c0989fce8a28f04876115be7ee34a7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016100201.png)
Modular Scale
Bases are a scale’s root numbers. For example, the size at which your body text typeface looks best. More → Ratios are multiplied by the base to produce a scale of numbers that is proportionally related. If you know what size you want a heading to be, type the target value @ position on the scale like 36@5 More → How do I use this? Use a scale like you would use a ruler. Many people set heading ty
Home - PlType-Te
Top 5 CSS Libraries CSS is an essential part of any website. However, pure css code sometimes forces you to write too much unnecessary stuff, and many libraries are willing to take on the chore. Learn More 10 Sass libraries to help speed up website development SASS is one of the popular CSS preprocessors nowadays. Learn More 10 best libraries for CSS animation All in all I have tried about thirty
スマホのテキストが美しくみえる一手間♥読まれるテキストのつくり方 : ハンゲームで働くWeb Designer Blog
コンニチハ！ 料理もひと手間入れる方です。 おがさわらです。 今日のテーマは「文字」について。スマートフォンの文字の使い方をWEBデザインの視点から見てみたいとおもいます。 文字に大切な３つのポイントスマートフォンでは文字の可読性は重要になってきます。スマートフォンの使用環境は移動中が多く、PCでのWEBページの表示よりも、 視認性や操作性を考慮していくことがより大切になってきます。 たとえば、歩きながら画面を見たとき、ユーザーは周囲に気を配りながら 歩くことになるので、PCほどじっくりと注意しながら見ることはなくなると思います。 そういったことから、スマートフォンでの文字の扱いにはフォントサイズは、全体的に大きめのにラインハイト（行間余白）は、PCよりも多めにコントラストをはっきりとさせることが大切になってきます。 1.フォントサイズ図１は各種フォントサイズ。 それをスマートフォンで表
Font Hinting and the Future of Responsive Typography
Font hinting has been the source of countless headaches for type designers and users. Meanwhile, some of the most fundamental and important elements of typography still can’t be addressed with the web of today. Rather than being seen as a tedious chore whose demise will be celebrated, hinting might actually provide the essentials for truly responsive design, and vastly expand the possibilities of
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
On Typography
Jan 21st, 2012I have been intrigued by the idea of making a typographic scale out of a musical scale that would not only be very readable, but also aesthetically pleasing. This whole idea started after the launch of my new site. At first, I ignored to see it, but weeks later I started to notice that the textual content of the site is actually pretty harsh for the eyes and the reading experience is
How To Maintain Readable Type In Responsive Design - Vanseo Design
Setting type involves choices that create proportional relationships in your text. Done well and your text will be both easy and desirable to read. As responsive layouts adapt to varying screen widths, one of these choices (line-length) changes. To maintain the same proportional relationships other aspects of the type need to adjust. Unfortunately the best solution to maintain proportions is not a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントサイズpx,em,%,pt
drewish.com