Re: [csswg-drafts] [css-fonts] Font Sizing for Readability (#6709)

> My concern is the amount of breakage this can do, at least until the property is widely adopted. How would it fallback for browsers the don't support it...?

This is why I think it shouldn’t be inherited like `box-sizing`. You _can_ implement it globally with the `*` selector, but you have to explicitly make that decision knowing it may break some things.

Additionally `@supports` will let you progressively enhance your code. I’m going to start using `px` in these examples to more clearly illustrate how things work, but relative units are always best practice.

```css
div { 
  font-size:  16px;  
}
@supports (font-sizing: ex) {
  div { 
    font-sizing: ex;
    font-size: 12px;
  }
}
```

---

> In this case what would the border width be? 12px, 17px, 23px, or 24px?

In your example:
```css
div { 
  font-sizing: ex;  
  font-size: 12px;  
  border-width: 1em;
}
```

It depends on the font used, but assuming a ratio of `0.52` for Helvetica, then the border should be about 23px.

---

> `font-sizing: ex 0.52;` where the number is the relationship of the x-height to the em size x-height is about 0.52 for Helvetica, so in this example it will bring the font back to the em size..... Or perhaps that should simply be the default...

As it is so rare that a font provides the ability to adjust the x-height, I think this might be out of scope for this spec. When that adjustment is available, the variable font axis is unregistered. If a font author wants the x-height to be adjustable, they can do that now by letting people set it with CSS like `font-variaiton-settings: 'XHGT' 0.52`. Roboto Flex calls the x-height axis “Lowercase Height”.

Additionally, the variability of x-height is part of the point of having a feature like this in my view. Currently the only way to do this is create a table and do this with a tool like the [web font loader](https://github.com/typekit/webfontloader). Allowing font sizing via x-height is a tool to _work with_ this variability instead of lock it to a specific ratio.

---

Here is an [excellent video on the need for font-sizing by x-height](https://twitter.com/Armstrong/status/1583555898047201280) from @chrisarmstrong.

-- 
GitHub Notification of comment by scottkellum
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6709#issuecomment-1400723906 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 23 January 2023 17:34:16 UTC