☰

Font scaling based on size of container Ask Question

tag-icon • tag-icon css responsive-design font-size
Font scaling based on size of container Ask Question

I'm having a hard time getting my head around font scaling.

I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels.

I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16 pixels whether the window is resized down to a mobile width or full-blown widescreen desktop.

How can I make the text on my site scale in relation to its container? I tried using em, but this doesn't scale either.

My reasoning is that things like my menu become squished when you resize, so I need to reduce the px font-size of .menuItem among other elements in relation to the width of the container. (For example, in the menu on a large desktop, 22px works perfectly. Move down to a tablet width and 16px is more appropriate.)

I'm aware I can add breakpoints, but I really want the text to scale as well as having extra breakpoints, otherwise, I'll end up with hundreds of breakpoints for every 100-pixels decrease in width to control the text.

ベストアンサー1

Container queries are now probably the best option, depending on your use case, with support in all of the major browsers. See the level of support here: https://caniuse.com/mdn-css_properties_container

It's now very easy to control:

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}

Please check out the MDN article on Container Queries for more detail: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

More examples of what you can accomplish: https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/

Old answer

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

  • vw (% of the viewport width)
  • vh (% of the viewport height)
  • vi (1% of the viewport size in the direction of the root element's inline axis)
  • vb (1% of the viewport size in the direction of the root element's block axis)
  • vmin (the smaller of vw or vh)
  • vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

ブラウザのサポートはかなり優れていますが、次のようなフォールバックが必要になる可能性があります。

p {
    font-size: 16px;
    font-size: 4vw;
}

サポート統計を確認してください:https://caniuse.com/viewport-units。

さらに広い視野を得るには、CSS Tricks をご覧ください。ビューポートサイズのタイポグラフィ

最小/最大サイズの設定と、サイズをもう少し細かく制御する方法については、次の記事が参考になります。レスポンシブなタイポグラフィを正確に制御

calc()テキストがビューポートを埋め尽くすようにサイズを設定する例を次に示します。https://codepen.io/CrocoDillon/pen/wvdrBY

また、行の高さを調整するために「molten leading」と呼ばれる手法を使用しているこちらの記事もご覧ください。CSS でのモルテン リーディング

おすすめ記事