[B! font-size][css] donnie28064212のブックマーク

Fit-to-Width Text: A New Technique

The Example Why don’t we look at the example of my new technique right away? What if I will tell you What if I will tell you how we could use how we could use registered custom properties registered custom properties (alongside container query length units and math) (alongside container query length units and math) to solve to solve fit-to-width text fit-to-width text in all latest browsers? in al

donnie28064212 2024/07/26

リンク

The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet

donnie28064212 2024/03/29

リンク

Clamp calculator

donnie28064212 2023/10/25

リンク

Responsive type scales with composable CSS utilities

If you’ve ever attempted to create responsive type that seamlessly adapts and scales between pre-determined sizes within a type scale based on viewport or container widths, you may have wrestled with JavaScript or wrangled with CSS calculators. But with the help of calc(), clamp(), and a somewhat wonky use of CSS vars, we can simplify this process and tap into the dynamism that modern CSS affords.

donnie28064212 2023/09/26

リンク

Container Query Units and Fluid Typography | Modern CSS Solutions

Container Query Units and Fluid Typography Updated on: Jun 4, 2023 Written by Stephanie Eckles Fluid typography is the term for designing font-size rules that responsively adapt the size based on the amount of available inline space. Before the availability of container query units, techniques usually relied on the viewport width - vw - unit. The viewport method is excellent for main page type, su

donnie28064212 2023/04/19

リンク

Easy Fluid Typography With clamp() Using Sass Functions — Smashing Magazine

donnie28064212 2022/10/06

リンク

僕は文字だけ拡大したい - dskd

公開日2020-02-02タグaccessibility文字だけ拡大できる機能とページ全体を拡大できる機能を持ったブラウザ（例えば Google Chrome）を使っていて、僕はその機能の違いを認識している。しかし、文字だけ拡大するとページ全体を拡大したのと同じ挙動になるように作られているウェブサイトがたまにあり、そういうサイトに限って文字だけ大きくしたいので、つらい。なんというか、手段が奪われたと感じてしまう。こちらの操作を阻害された感。 CSS でサイズ指定が全部 rem 単位だとそういうことが起きるんだけど、せっかく文字だけ拡大する方法があってそれを使いたいのにページ全体を拡大したのと同じになっちゃうというのは、エクスクルーシブではないだろうか。大きいディスプレイ使ってると、その広さに見合った情報量、たとえば図と文字をある程度俯瞰できる割合を保ったまま文字を大きくしたいって思う

donnie28064212 2020/02/02

リンク

A Modern Typographic Scale

Rob Weychert reaches for the top notes to sing us a song of typographic scale. A little attention to scale and to the mathematics will help you to hit a high note with your designs this Christmas and beyond. I’ve been studying music theory this year. While some of its core concepts were already familiar to me, much of their specifics were not. Or so I thought. A funny thing happened when I was lea

donnie28064212 2019/12/19

リンク

[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(Responsive Font Size)のデモ RFS(Responsive Font Size)の使い方 RFS(Responsive Font Size)の特徴 RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。フォントのサイズは、スクリーンやデバイスごとに最適化されます。フォントのサイズには下限と上限があ

donnie28064212 2019/02/18

リンク

Flexible type with :root - Matt Smith

One element of responsive web design that can be tricky to solve for is typography. Ideally you want to have type that’s as fluid as possible across different viewports. A conventional way of doing this might be to start with a base font size and then change it when you hit a specific breakpoint: p { font-size: 1em; } @media screen and (max-width: 45em) { p { font-size: 1.25em; } } Here the font s

donnie28064212 2018/01/06

リンク

[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。 Responsive font calculator ツールの使い方は、簡単です。 Units フォントのサイズ指定に使う単位を「px, rem, em」から選択。 Selector 「font-size」を適用するセレクタを記述（id, class など)。 Font-size フォントが拡大縮小する範囲を指定。 Viewport width フォントのサイズに対応するビューポート幅を指定。 Options コメントの有無、サイズの最大値を超えないように指定スタイルシートは

donnie28064212 2017/03/11

リンク

[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size

フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。 CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるテクニックを紹介します。

donnie28064212 2017/01/31

リンク

モバイルフレンドリー対応_GoogleとAppleの推奨フォントは？ | ブログ | SINAP - 株式会社シナップ

こんにちは、内藤です。モバイルフレンドリー対応の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います！とはいえ、ウェブ制作をされている方ならご存知の方は多いと思いますので、今回はさらっとおさらいしていただければと思います。 <SINAP モバイルフレンドリー対応連載> 第1回：「スマホで読まれる文章とは？」第2回：「GoogleとAppleの推奨フォントは？」第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」第4回：「スマホサイトの「続きを読む」は必要か？」第5回：「スマホで読まれる文字数は？」第6回：「記事をページ分割するメリット・デメリット」それでは第2回、いってみましょう。フォントの設計にある程度の正解は存在するウェブは誰のものでもないので、良くも悪くも「このルールに従って作りなさい」

donnie28064212 2015/04/23

リンク

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド）この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚