Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
読字に困難「ディスレクシア」に読みやすい「UDフォント」広がる
文字が崩れて見える「ディスレクシア」という症状を抱える人がいます。そうした人にも見やすい「フォント」の文字の利用が広がっています。 「ディスレクシア」の大学生・西川幹之佑さん（20）：「あー見づらいですね。あー細いな…」 東京都内の大学に通う西川幹之佑さんは、文字が崩れて見えるディスレクシアという症状があります。 ディスレクシアは学習障害の一つで、文字を素早く理解することができないということです。 西川さんの場合、「山」という漢字は縦線3本に見え、「返」という字は細い線が消えているように認識されることもあるそうです。 また、文字のバランスが取れていないように感じて気分を悪くすることもあるといいます。 「ディスレクシア」の大学生・西川幹之佑さん：「（小学生の頃は）読み取るのが精いっぱい。1ページ（読む）だけで授業1回分（約45分）です」 文字を理解するのが難しいと文字を覚えて書くことも難しく
Making Google Fonts Faster in 2022
Photo by Bob Newman on Unsplash In this article, I will show you how to: Choose the best way to import your Google Fonts Skip over some of the latency time for downloading fonts Fix flash-of-invisible text (FOIT) Self-host your fonts for faster speed and greater control Anatomy of a Google Fonts request # Let’s take a step back and look at what is happening when you request from Google Fonts using
How to avoid layout shifts caused by web fonts
One of the outcomes of the release of Core Web Vitals (and subsequent inclusion in Google's page ranking algorithm) is that we have been paying more attention to unexpected layout shifts and the cumulative layout shift (CLS) score. Some sources of layout shifts have been simple to resolve: pre-allocate the correct space for dynamic elements, use width and height attributes on images and prioritise
文字サイズの比率と調和
ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
Optimizing Google Fonts Performance — Smashing Magazine
Like all good things, Google Fonts do come with a cost. Each font carries a weight that the web browser needs to download before they can be displayed. Google Fonts are easy to implement, but they can have a big impact on your page load times. With the correct setup, the additional load time isn’t noticeable. However, get it wrong and your users could be waiting up to a few seconds before any text
SF Mono を使って最高のプログラミング用フォントを作った話 - Qiita
みなさんターミナルは使ってますか？ Terminal.app？ iTerm2？ Hyper？ それとも他の何か？ それではフォントは何を使っていますか？ Menlo？ Consolas？ Ricty？ 今日はそんなお話です。 対象とする読者 ターミナルやエディタでカコイイ等幅フォントが使いたい人。 既存のフォントを FontForge + Python で色々いじって遊びたい人。 プログラミング用フォント SF Mono Square ずっと Ricty を使っていたのですが、色々こだわる余り自分でフォント作ってしまいました。作ったものをそのまま配布するのはライセンス上できませんが、Homebrew で誰でも導入できるようにしています。 brew tap delphinus/sfmono-square brew install sfmono-square # /usr/local/opt/
レスポンシブwebデザインのコーディングでやってること - kojika17
今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す
【Seaborn】日本語を表示する (フォントを変更する) - Qiita
Seaborn? Seaborn とは、Pythonの外部モジュールのひとつで、統計データの可視化を目的として作られています。 公式ページでは、 Seaborn is a Python visualization library based on matplotlib. It provides a high-level interface for drawing attractive statistical graphics. (SeabornはmatplotlibにもとづくPythonの可視化ライブラリです。魅力的な統計グラフを描くためのハイレベルなインターフェースを提供します。) と説明されています。要は、matplotlibをかっこ良く、かつ使いやすくするためのライブラリです。 しかし、Seabornはフォントの問題でデフォルトでは日本語をうまく表示することが出来ません1。 impo
CSS Rhythmic Sizing で Vertical Rhythm | blog.jxck.io
Intro タイポグラフィに関連したデザイン手法の 1 つに Vertical Rhythm がある。 そして、現在 CSS でそれを簡単に実現するための CSS Rhythmic Sizing という仕様が提案されている。 Chrome にフラグ付きで実装されたこの仕様を用いて、本サイトへの適用を行ったので、解説する。 CSS Rhythmic Sizing CSS Rhythmic Sizing 筆者はタイポグラフィやデザインには疎く、 Vertical Rhythm についてもよく知らなかった。 しかし、 Chrome でこの仕様を実装している Koji Ishii さんに API を紹介してもらい、色々学ぶ機会があった。 本仕様はまだブラウザ間でも合意が取りきれていない部分があるらしく、ユースケースやフィードバックを集めている段階とのことだったので、 トライアルとして、本サイトへの
Rails 4 で assets に font を追加する方法 - Qiita
app/assets/fonts に ttf, woff, etc... を投入する。終わり。 よくconfig/application.rbに設定を追加しているのを見かけますが間違いです。 config.assets.paths に設定追加の間違い config.assets.paths << Rails.root.join('app', 'assets', 'fonts') こういうの。 間違いじゃないのですが、app/assets 以下は自動で追加されるので不要です。 config.assets.precompile に対象ファイル追加の間違い config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ こういうの。 .css, .js以外は precompile する必要がないので不要です。 以下の設定もよく見かけるのですが、正規表現
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
読みやすいフォントの CSS 設定例 | murashun.jp
［ ＋ expand ］美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
Fluid Responsive Typography With CSS Poly Fluid Sizing — Smashing Magazine
In this article, we are going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass. Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has ye
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) 以下のことがわかります
CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations
When working with creative designers on web page designs, it’s fairly common to receive multiple Sketch or Photoshop artboards/layouts, one for each breakpoint. In that design, elements (like an h1 heading) will usually be different sizes at each breakpoint. For example: The h1 at the small layout could be22pxThe h1 at the medium layout could be 24pxThe h1 at the large layout could be 34pxThe bare
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - twbs/rfs: ✩ Automates responsive resizing ✩
matplotlibで描画したグラフの文字化けを解消する - Qiita
日本語の既定フォントが変更されました | Firefox サイト互換性情報
