Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
ソリッドとホローフォントを組み合わせるタイポグラフィトレンド
Natalyはウクライナ・セバストーポリ出身のWebデベロッパー。ワードプレスやIT関連の執筆に情熱を注いでおり、自身のブログサイトで、Webに関する有益な情報、記事、チュートリアルを提供しています。 Webサイトに最適なタイポフラフィを見つけるため、フォントを複数組み合わせることは珍しいことではありません。 デザイナーは見出しと本文のフォントをそれぞれ１つずつ選択するのが定石です。１つ目のフォントは、タイトルを目立たせるための装飾的で太いフォントで、それに対し２つ目のフォントは本文を読みやすくするために、シンプルなものである場合がほとんどです。 この領域には、流行りの組み合わせや、トレンドセッターさえ存在します。ときに斬新さや革新が求められますが、Webデザインにおけるフォント選びにおいてはクリエイティブ集団のトレンドに乗っておく方が無難でしょう。そしてつい最近、また刺激的なトレンドが現
タイポグラフィを活用するための12のツール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。 Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏） しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。 以下の項目に分けて、ツールを紹介しています。 フォントを選ぶ フォントペアリングとスタイリングを選ぶ フォントに情報の階層を付ける インスピレーションを得る フォントを選ぶ タイポグラフ
Googleフォントの使い方: Webフォントの表示の仕組みと最適化
Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチャ: Google Fonts + 日本語 早期アクセス 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Googleフォントのロードに何を注意すべきか Webフォントの実装に役立つリソース Googleフォントの遅延読み込み まとめ Googleフォントのロードに何を注意すべきか 私はロンドンで開催された「Polymer Summit
[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)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
