CSS カスタムプロパティによる流動的フォントサイズ
はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
ブラウザの作り方
リンク集 - Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/ - How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/ - W3C: https://www.w3.org/ - WHATWG: https://html
小形克宏の「文字の海、ビットの舟」――文字コードが私たちに問いかけるもの
小形克宏の「文字の海、ビットの舟」 ―― 文字コードが私たちに問いかけるもの [Reported by 小形克宏] 第1部 2000JISがやってきた 第1回 2000JISとはなんだ？ （2000年1月19日） 第2回 2000JISの原案はなぜ修整されたか？ （2000年1月26日）加筆修正 2000年2月22日 第3回 前回までの訂正と補遺 （2000年2月2日）加筆修正 2000年2月22日 第4回 JCS委員長、芝野耕司の反論（前編） （2000年2月9日）加筆修正 2000年2月12日 第5回 JCS委員長、芝野耕司の反論（後編） （2000年2月16日）加筆修正 2000年2月22日 特別編 MacOS Xの新フォントと2000JISの関係 （2000年2月23日） 特別編2 ISO/IEC 10646で却下された(?)JIS X 0213の新漢字一覧表 （2000年3月8日
「現実化したフォント」がおしゃれなのでマスターしたい
なんだか、すごくファッショナブルに見えませんか？ 「文字を背景にくぐらせる」の真意か分かってもらえたと思う。背景というのかな、被写体？何にせよ、これ、2～3年くらい前からちょこちょこ見る。航空機の機内誌とか、あと日本のハウス・ミュージック（というより個人的に好きなtofubeatsというトラックメーカー）のミュージック・ビデオでよく見るような、見ないような。 これを駆使すれば、ひょっとするとなんでもない写真になんでもない言葉でもおしゃれに見えるんじゃなかろうか。今は便宜上「おしゃ文字」と呼ばせてもらおう。なんだかしゃもじに対する間違った丁寧語のようだが、そんなことを思ったのは書いてる自分だけだろうからまぁいいや。
超高速な静的Webページを作ろう！ - Qiita
PageSpeed Insights 計測結果 モバイル/パソコン 共に100点 速度という点に絞ると信用できるものではないかもしれませんが、100点という数字は単純にうれしい:) それでは！以下が私のやったことです リクエスト数を極限まで減らす CSSはstyle属性やstyleタグで設定 複数箇所で使う場合はstyleタグに、要素固有のスタイルはstyle属性で設定してしまいましょう。 style属性で設定する場合はセレクタでの捜索が発生しないので、ごく僅かながら速くなると思います。 画像はbase64で埋め込む こことかでデータURIスキームに変換してhtmlに埋め込みます。 base64エンコードすると容量が1.3倍くらいに増加するため大きな画像には向かない方法ですが、小さなアイコン程度ならリクエスト数減らすほうが効果的な場面があります。 複数箇所に使う画像の場合はCSS変数でba
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
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) 以下のことがわかります
「ユニコード」で予期せぬ目に遭った話 - moriyoshiの日記
自分の知らないCJK Ideographのバリエーションがまだあったことに戦慄している pic.twitter.com/kUlyRLDDTM— moriyoshit (@moriyoshit) March 9, 2017 などというツイートをしたところ、思ったより反響があったのでまとめておく。 上記ではあいまいに「バリエーション」などと書いたが、Unicodeとそれを扱う環境においては、バリエーションと一口に言っても次のような状況がある。 意味論的に等価な異なる字形の集合 同じ字形で異なるコードポイントの集合 aは結構なじみ深いと思う。 a-1. 異なるコードポイントにそれぞれ異なる字形が割り当てられているもの 例: 「東」(U+6771) ⇔「东」(U+4E1C) 「斉」(U+6589) ⇔「齊」(U+9F4A) 「高」(U+9AD8) ⇔「髙」(U+9AD9) a-2. 同じコードポイ
ナチスに禁止されながらもアポロ11号と月面まで到達したフォント「Futura」
幾何学的なデザインが多かった初期のフォントデザインの中で、1920年代に、今なお世界中で使われている現代的で可読性の高いフォント「Futura(フーツラ)」がドイツ人デザイナーのパウル・レナーによって発表されました。フーツラがナチス・ドイツに使用を禁じられるなどの危機を乗り越え、結婚式の招待状から芸術家・映画監督にまで愛されるフォントとして広まった経緯がムービーにまとめられています。 The font that escaped the Nazis and landed on the moon - YouTube 「Futura(フーツラ)」というフォントは世界中で広く使われています。 フーツラのフォントはナイフで切ったような鋭さと…… 大きく丸く描かれたカーブが特徴です。 フーツラは芸術家のバーバラ・クルーガーのポップアートに使われており…… バーバラ・クルーガーのパロディアートとして、ス
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
新宿駅の「ガムテープ案内表示」を作りだした佐藤修悦さんインタビュー ！『修悦体』はこうして生まれた
» 新宿駅の「ガムテープ案内表示」を作りだした佐藤修悦さんインタビュー ！『修悦体』はこうして生まれた 特集 皆さんは、「修悦体」という書体をご存じだろうか？ 佐藤修悦さんというガードマンの方が、ガムテープを使って作り出した書体である。佐藤さんは、2005～2007年頃にかけてテレビや新聞などで話題となり、ネットでも注目を集めた人物だ。一時期JR新宿駅で、この修悦体を使ってガムテープで書かれた案内表示をしょっちゅう目にした。 あれから約10年を経て、新宿駅の様子も様変わりし、ガムテープの案内表示も見かけなくなっていたのだが……。ここ最近、再び新宿駅のアチコチで「左側通行」の文字を見かける。これはもしや！ 佐藤さんが再び活躍しているのではないか？ そう思い、私（佐藤）はその真相を確かめた。 ・約10年前の記事 私が最初に修悦体の存在を知ったのは、ネットメディア「デイリーポータルZ」の記事だっ
かっこいい日本語フリーフォント16選（デザイン向き） - 無料で使える日本語フォント投稿サイト｜フォントフリー
日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴに適したフォントはこれ！有名ブランドから学ぶ、ロゴのデザインに使用されているフォントのまとめ
2017年にリリースされた日本語のフリーフォント、英語のフリーフォント総まとめ
travelbanana.net
フォントの選び方・使い方
日本語フリーフォントの作者様に感謝！最近リリースされた日本語の無料フォントのまとめ
フォントで重要なのは組み合わせ、Googleフォントを使ったオススメの組み合わせ方
