タグ

フォントに関するdorapon2000のブックマーク (3)

  • font-size には rem を使うべきかどうかについての見解

    font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値(rememなど)で指定する必

    font-size には rem を使うべきかどうかについての見解
    dorapon2000
    dorapon2000 2025/05/10
    “上記の理由から実際に文字拡大機能を動かして検証を行い、かつ拡大時のレイアウト調整に時間的・労働的コストを掛けられる現場のみがremを使用するのが良い。”
  • CSSでテキストの上下余白が調整可能に!text-box-trimの使い方 - ICS MEDIA

    2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日フォントの場合を中心に紹介します。 テキストの上下のスペースとは? 今回調整ができるようになったテキストの上下のスペースとは何でしょうか? このスペースはテキストにline-heightプロパティを設定した際

    CSSでテキストの上下余白が調整可能に!text-box-trimの使い方 - ICS MEDIA
  • じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか|chot Inc. デザイナーユニット

    こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば?」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが(良くない)実際にずれていて、ではなぜそんなことになっちゃっているのか

    じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか|chot Inc. デザイナーユニット
    dorapon2000
    dorapon2000 2024/06/22
    “また今回で言うところの③の方法でアイコンに上paddingを持たせ、テキストとアイコンのズレが出ないよう対応に変更しているみたい。”
  • 1