Web フォントを使って contenteditable から脱出するこの記事は、合併前の旧ブログに掲載していた記事（初出：2022年1月19日）を、現在のブログへ移管したものです。内容は初出時点のものです。こんにちは、LINE フロントエンド開発センターの玉田です。突...
Why I’m excited about text-box-trim as a designer
I’ve been excited by the potential of text-box-trim, text-edge and text-box for a while. They’re in draft status at the moment, but when more browser support is available, this capability will open up some exciting possibilities for improving typesetting in the browser, as well as giving us more control of alignment and internal spacing in our components, such as a button. Daniel Schwarz wrote a g
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
The Surprising Truth About Pixels and Accessibility: should I use pixels or rems? • Josh W. Comeau
Filed underCSSoninMay 17th, 2022.May 2022.Last updatedoninMay 15th, 2025.May 2025. IntroductionShould I use pixels or ems/rems?! This is a question I hear a lot. Often with a dollop of anxiety or frustration behind the words. 😅 It's an emotionally-charged question because there are a lot of conflicting opinions out there, and it can be overwhelming. Maybe you've heard that rems are better for acc
Subsetting Font Awesome to Improve Performance | CSS-Tricks
Font Awesome is an incredibly popular icon library. Unfortunately, it’s somewhat easy to use in a way that results in less-than-ideal performance. By subsetting Font Awesome, we can remove any unused glyphs from the font files it provides. This will reduce the number of bytes transmitted over the wire, and improve performance. Let’s subset fonts together in a Font Awesome project to see the differ
5 steps to faster web fonts /// Iain Bean
In my previous post, I wrote about system fonts and their advantages over web fonts. I encouraged a ‘system fonts first’ approach, arguing that, compared to system fonts, web fonts (a) can negatively impact performance, (b) use more data, and (c) increase your site’s energy consumption. But a web without web fonts would be a far less interesting one — maybe by using web fonts a little more respons
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、Layout Shift が発生してしまう。 これを防ぐ方法として、CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); ascent
Improve User Experience with Proper Webfont Loading
David Fox (@theobto) is CTO and founder of LookZook - a company providing highly visual web performance metrics for developers and CMOs. David got his start in programming and UX as a Flash game developer during the golden age of Flash gaming (remember Newgrounds?). Since then he's applied that knowledge and transitioned to the web: becoming a Blink contributor, writer and speaker for various even
Variable Fontについて - console.blog(self);
Goodpatch Advent Calendar 2016の7日目！ フォントもくもく会 #5でVariable Fontについて調べてみた。2016年9月にVariable Fontというものが発表された。ひとつのフォントファイルで、さまざまなウェイトで表示ができる。 ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。Apple、Google、Microsoft、およびアドビが共同で開発したバリアブルフォントは、ジョン ハドソン（John Hudson）の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト（太さ）や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのよ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
「ウェブでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの世界では基礎テクニックのひとつとされています。 そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えます。今回はそんなfont-feature-settingsプロパティの魅力と使いどころを紹介します。 この記事のポイント 使い方は簡単。CSSで次のプロパティを設定するだけです。 .selector { font-feature-settings: "palt"; } 左が未指定の状態、右がCSSを適用した状態です。文字が引き締まって表示されています。 たったこれだけのコードで自動カーニング
`font-display` for the Masses | CSS-Tricks
Updated on January 12, 2017: Proper support checks are now part of the article body. Added information about the block value. Minor tweaks and copy edits. Enjoy! If you’re a regular reader here at CSS-Tricks, chances are good you know a bit about web fonts. You may even know a few useful tricks to control how fonts load, but have you used the CSS font-display property? The font-display property in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Modern Font Stacks
Font Family and @supports
localGFonts - Self-host google fonts generator
GitHub - glyphic-co/textblock: Continuously responsive typesetting — Demo:
GitHub - fontplus/web-typography-glossary: Webタイポグラフィの基礎知識と実践
Safari 12ではユーザがインストールしたフォントをfont-familyに指定できない - Qiita
CSS Injection ++ - 既存手法の概観と対策 - Speaker Deck
Intent to Implement and Ship: The “system-ui” generic font family
モダン日本語フォント指定
