font-weight and font-stretch: improvement idea for better explanation/visualisation

[ollimeier]

Hi there,

I was wondering if you would be interested in adding some images to explain font-weight and font-stretch in a better way?

We (Fontwerk) just created a new typeface called 'Neue DIN' which works 100% with the CSS (W3C) specifications. Which means it covers weights from 100-900 and widths from 50% to 200%.

These are the areas of the CSS documentation:
https://github.com/mdn/content/blob/642f2385b7cf791b3a40a81a17752f5b0c3208ea/files/en-us/web/css/font-weight/index.md
https://github.com/mdn/content/blob/642f2385b7cf791b3a40a81a17752f5b0c3208ea/files/en-us/web/css/font-stretch/index.md

Here are some pics:

NeueDIN_Artwork_2.mp4

One main idea of the typeface was to cover the full range of CSS possibilities.

More about the font: neuedin.com

Thanks a lot in advance,
Olli

[ollimeier]

I also would vote for different keywords:

Keyword previous	Keyword new	Percentage
ultra-condensed	xxcond	50%
extra-condensed	xcond	62.5%
condensed	cond	75%
semi-condensed	semi-cond	87.5%
normal	normal	100%
semi-expanded	semi-wide	112.5%
expanded	wide	125%
extra-expanded	xwide	150%
ultra-expanded	xxwide	200%

I know that backwords compatibility is probably one of the biggest things, but I found the current keywords always difficult to work with. I would much appreciate if you would at list consider the new proposed keywords a possibilities for the future.

The new keywords are much shorter, more consistent and better to understand. I expect everyone knows 'x' as 'extra'.

[hamishwillee]

The keywords are from the spec and changing them is outside the scope of MDN. If you wanted those changed you'd have to discuss with the spec authors.

[ollimeier]

Thanks a lot @hamishwillee. Do you have any idea how I get in contact with the spec authors?

[hamishwillee]

I don't think we'd be interested in adding images for any of the font width or font stretch examples, because we've recently been replacing images with examples that actually use live fonts for demonstration.

If this is an open source font we'd certainly consider using it as well as some of the others - for example here https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#font_face_selection. As you say it would be great to show a font that supports the whole range, and there aren't many.

We typically use open source fonts where possible because MDN code is often copied, and we don't want to accidentally encourage use of fonts outside of their licenses.

PS, I like the font :-)

[ollimeier]

@hamishwillee Thanks for your explanation. I totally get your point of view, but I am sorry to say, that it's not an open source font. We designed the font with the CSS and OpenType specifications in mind. This is the reason why I thought, it would make sense to use it for better images.

And thanks a lot for your kind word :)

[hamishwillee]

Thanks for letting me know. I guess we'll keep waiting for an open source font that has the broader range of values. What we have now is enough to demonstrate the point. In fact you might argue that showing that fonts do not necessarily support the broad range is a useful thing to do.

I've marked this as answered.