簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
【CSS】font-feature-settingsプロパティのmacOS/iOSでのバグが解消されていました【palt】 | briccolog
小ネタです。以前CSSのfont-feature-settingsプロパティについて取り上げた以下の記事↓ 文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました …の執筆時点で確認されていた、Mac OS XおよびiOSのバグが、解消されていました！ 上記キャプチャはmasOS Sierra (10.12.5)のものですが、iOS 10.3で確認しても同様でした。 font-feature-settings:palt;は、サイト全体のテキストに適用するには不適かもですが、見出し文字列などであれば、積極的に使える環境が整ってきたと言えるかもしれませんね。
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Font−familyのベストな書き方 2018年改定版 | それからデザイン スタッフブログ
CSSでフォントの種類を指定する「font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントの技術の変化などにより日々変わっています。 このブログでも「font−familyのベストな書き方 2015年版」「font−familyのベストな書き方 2017年版」として、当時のトレンドを踏まえたfont−familyの指定方法の記事をアップしました。 今回は実際に使用していて気づいた問題も出てきたので、これを機にアップデートしたいと思います。 前回紹介した「2017年版font−familiy」の問題点 2017年版font−family body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作る - Qiita
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作るfontNotoSansfonttoolsNotoSerif はじめに 2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が発表されました。 さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。 ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。 サブセットフォントメーカーは使わない 以前は武蔵システムさんの「サブセットフォントメーカー」という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の
グランジで雰囲気のあるデザイン演出を Cymbriaの多種多様なフォントファミリーがまとめられた「Cymbria Free Font Family」
TOP > Font > グランジで雰囲気のあるデザイン演出を Cymbriaの多種多様なフォントファミリーがまとめられた「Cymbria Free Font Family」 デザインを支える要素の一つであるフォントデザイン。多種多様な欧文書体を持つことも大切ですが、一つのフォントで色々なタイプを持つこともデザインの微妙な調整時には必要なのではないでしょうか。今回は様々なフォントをご紹介するのではなく、焦点をCymbriaにあてたまとめ「Cymbria Free Font Family」をご紹介していきたいと思います。 癖がなく使用しやすいCymbriaはデザインする人なら持っておくと便利なフォントの一つ。太さなどのバランスが取られたセットがダウンロードできるようになっています。 詳しくは以下 フォントスタイルは6種類。丸みを帯びているかいないかだけでも印象は変わり、全体的にシンプ
デザインの腕が上がる、すごい新作フリーフォント50個まとめ 2017年6月度
見ているだけで楽しくなる、個性豊かな新作フリーフォントをまとめています。個人利用、商用利用の可否についても一緒に記載しているので、デザインの目的に合った書体をスムーズに見つけることができます。 豊富なウエイトが揃ったシンプルな万能フォントから、トレンドを意識した手書きブラシフォント、読みやすさにもこだわった筆記体など幅広いバラエティが用意されているので、今後のデザイン案件に活用してみてはいかがでしょう。 デザイナーが愛用したい！こだわりの新作フリーフォント60書体まとめ 2017年5月度 デザインの腕が上がる、すごい新作フリーフォントまとめ Wavehaus Sans Typeface 太さの異なる極細から太字まで6ウエイトが揃ったサンセリフ書体は、使い勝手のよい万能スタイル。 ※ 個人、商用利用可能 Chlakh 手書きされたレトロ系フリーフォントで、温かみのあるデザインに仕上げます。
読めるかな？視力検査なみに小さいフォント ｜ Tips Note by TAM
レスポンシブ対応などの際、デザイン性を重視し、「ここだけは文字サイズを小さくしてエリア内に納めたい!」という要望があったとします。その場合、みなさんはどんな方法で対応しますか？ ブラウザ上でフォントを 10px以下のサイズとして表示させたい ブラウザが表示できるテキストの大きさ（font-size）には限界があります。最小サイズはブラウザの設定によっても異なりますが、例えば chrome では 10pxが一番小さいフォントサイズです。 transform:scaleを使ってみる！ CSS3 の機能で要素を拡大・縮小表示する際に使う scale。こちらを利用し、font-size:10px; に設定した文字を縮小させ、ブラウザが表示できる限界のサイズを超えていきたいと思います。 では早速。 CSSコード div{ font-size: 10px; } .font_01{ transform:
無料ダウンロードし放題！商用OKなフリーフォント50個まとめ 2017年1月度
毎月、世界中で公開されているたくさんのフリーフォントですが、「数が多すぎてどれを使えばいいのか迷ってしまう。」というひとも多いのではないでしょうか。今回は、年末から2017の年明けにかけて公開された、無料ダウンロードできる高品質フリーフォントを厳選ピックアップしています。 どんなデザイン案件にも使いやすい万能フォントから、デザイントレンドの手書きブラシフォントや、人気の高い筆記体など幅広いセレクションから揃えています。商用利用も可能な素材が中心で、利用ライセンスも一緒にまとめていますが、参照元ページを一度確認してご利用ください。 商用可で完全無料！2016年公開のフリーフォント素材105個総まとめ 詳細は以下から。 無料ダウンロードし放題！厳選フリーフォントまとめ Signatura Monoline Script ※ 個人、商用利用可能 Bourbon Grotesque ビンテージな風
Heartbleed.com で使用されているフォント "Lato" がクール - white croquis
まず、「OpenSSL の Heartbleed 問題」については前回の記事をご参照ください。 Heartbleed 問題で一般ユーザーは何をすればよいのか？ - white croquis 今回はデザインの観点から。 Heartbleed 問題の情報を集約している "heartbleed.com" のWebサイトは、白地に細めのサンセリフ体、そして赤い "Heartbleed" のシンボル、と病院を思わせるような色使いの、クールでシンプルな雰囲気のレスポンシブデザインになっています。 そして、このサイトで使われているフォントを調べてみると、Google Fonts で提供されている "Lato" というフォントでした。（下の画面は "What Font" という Google Chrome 拡張機能で表示した画面です） Google Fonts Lato Lato - quality o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font−familyのベストな書き方 2017年版 | それからデザイン スタッフブログ
Web Fontでオールドスタイル数字を使う方法 – creamu
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
skan.in