Yu Gothic UIに text-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。 発生している問題 回避策 原因 Yu Gothic UI 特有の問題？ まとめ 発生している問題 Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。 手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。 このフォントをChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開

System font stack CSS organized by typeface classification for every modern OSThe fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ...　// 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz

Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 Meiryo UI 'Meiryo UI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'Yu Gothic', 愛のあるユニークで豊かな書体 Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体 Windows8.1~ Yu Gothic UI 'Yu Gothic UI', 愛のあるユニークで豊かな書体 Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MS UIゴシック 'MS UI Gothic', 愛のあるユニークで豊かな書体 MS明

小説サイトの日本語タイプグラフィをどう実装するか？　ユーザー体験をコード、実装でアプローチする技術コミュニティ「UX CODE」による勉強会「UX CODE IN GSS #2」が2月29日、ドワンゴで開かれた。 ドワンゴは、2月、中日本高速道路と共同で設立したIP製作委員会「NEFCO（ネフコ）」によるプロジェクトの第1弾作品として、芝村裕吏氏によるWeb小説「幻想交流』をスタート。スマホ、PCで見られる専用サイトを公開している。 この小説サイトでこだわったのが、小説の世界観を表現するフォントだ。ドワンゴの藤村拓也さんは、「あらゆるユーザーに小説を届けたい」と考えたときに、「Androidには明朝体がない」「MS明朝にアンチエイリアスが効かない」など、デバイスフォントの限界を感じたという。 そこで導入したのがWebフォントだ。最近は欧文をWebフォントで表現するサイトは珍しくないが、日本

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事『Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ』を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 font-feature-settin

Google Font API(& Google font directory)というのが出たのではてなで使おうっていうただそれだけ手短に。Webfontsについてはぼくそんなに詳しくないので説明しませんがすみません。 2010/11/01 追記: 記事の内容に落とし穴がありましたので、改稿しました。 Google Font Directoryから使いたいフォントを探してGet the code。 link rel="stylesheet"で呼び出す方法が書かれているが、これははてなダイアリーでは許可されていない。はてなダイアリーで使用するには、代わりに@importを使用するとよいだろう。 @import url(http://fonts.googleapis.com/css?family=HOGEHOGE); 但し、はてなダイアリーにおける@importの使用には、以下のような制限が存

昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。 <link rel="stylesheet" ty