jpamental / variable-fonts Goto Github PK

Loving the site. Nit:

Observed on Chrome 80.0.3987.122 (Official Build) (64-bit), Linux.

I have a bunch of links to triage for inclusion in the "further reading" section; for now I'll drop a few here and continue to do so when I have a moment :)

https://css-tricks.com/one-file-many-options-using-variable-fonts-web/

https://css-tricks.com/typography-for-developers/

https://www.userzoom.com/blog/what-are-variable-fonts-and-how-do-they-benefit-ux/

https://medium.com/dev-channel/variable-fonts-and-the-digital-revolution-9b31cb910d7c

https://www.bbc.co.uk/rd/blog/2018-08-variable-fonts-open-type

https://www.shopify.com/partners/blog/variable-fonts

https://theblog.adobe.com/can-variable-fonts-illustrator-cc/

https://blogs.adobe.com/creative/adobe-indesign-2020/

https://blog.sketchapp.com/variable-fonts-improved-opentype-support-and-a-new-data-plugin-whats-new-in-sketch-e16f81bf8b75

https://create.adobe.com/2018/5/22/variable_fonts_are_t.html

https://www.nngroup.com/articles/variable-fonts-wide-screen-layout/

https://typetura.scottkellum.com/

This issue is for tracking progress on content for VF introduction. It may be broken up into separate pages at some point but this will get us started

Google doc:
https://docs.google.com/document/d/1ctqpHqB5jgoiWAK9GazMPc4O00_uSC2evLarZkhBrEo/edit

Just putting this here as a nudge. I don't have access to the design, but I'm happy to help if I can. This is the last outstanding bit (apart from wanting the toggles) so just don't want to leave it hanging out there.

somehow this (text color white) happened to a colleague once but on a hard refresh it was no longer reproducible...

These slides snap from 0 to 1 or -1 to 0 to 1, but should be continuous

Using this issue to track the development of the information architecture & sitemap.

Doc is here:
https://docs.google.com/drawings/d/1hXB99kQsWGx1EE7ViIdArDa1PLlul3xsvXwH6N2xbqo/edit

I could not find any reference to font-width used in the font stretch example

Text:

p {
font-stretch: 89%;
}

Dynamic example:
.text {
font-width: %;
}

Web debugger:

font-stretch: calc( var(--text-vf-wdth) * 1%);

not font-width

Working through the process of setting up a build process that combines Gulp and Jekyll processes so we can include Material Design components.

This is now mostly complete. The Gulp process runs entirely in the local environment and then Jekyll runs as it normally does both locally and upon deployment to the gh-pages branch.

In the Performance section, these

items' font style settings look odd, esp size

This issue will track tutorial content for learning how to implement VFs

Google doc:
https://docs.google.com/document/d/1pvyb58U77m50C_7R0wVamiaUpyWr3JYr0cd62uxR-7E/edit

With Release 1.046/1.047 of Recursive, the family no longer accurately falls under the description of "Slant & Italics," largely because after several conversations with Dave Crossland and DJR, I've come to the conclusion that a font probably shouldn't contain both Slant & Italic axes – or at least, it didn't make sense for Recursive.

I wrote more about the issue in notes on the topic of Slant & Italic axes in Recursive.

The main thing: I updated the Italic axis to "Cursive," because ital 1 should result in the "Italic" style of a typeface. The axis I had didn't really do that – instead, it tweaks cursive letterform substitution behavior along the Slant axis.

I don't think I can totally rewrite this section in a way that everyone would be happy with (especially without chatting it over, first). However, a few things that I believe should change are:

• The slnt axis should be -15 to 0 (it is a negative range). It shouldn't be capped at 10 degrees. Also, it only gets positive numbers if it is being called from the declaration font-style: oblique XXdeg.
• ital should change to CRSV in this section
• CRSV should have a step of 0.5, so that its default "auto substitution" setting can be the default shown. This allows Cursive alternates to auto swap in at slnt -14. Setting CRSV to 0 prevents this (letters stay roman up to slnt -15, and setting CRSV to 1 asserts cursive alternates at any slant.
• I'm not sure if it's worth saying, but once browsers properly support font-style for variable fonts, the Slant axis will work quite well with this property – no font-variation-settings required unless people want to adjust the CRSV axis. Of course, this will take months (at minimum), so maybe it's fine to recommend font-variation-settings font now, and update later when font-style is better supported.

Of course, it's possible we should just remove this "Slant & Italics" section entirely, and (hopefully) move this slnt+CRSV example up to the "Slant" section. For one thing, "Slant & Italics" is under "Registered Axes," which is no longer true. Also, even DJR said that Roslindale Italic Variable Beta, in combining slnt+ital, doesn't do things in a way he would likely do them today (paraphrasing his words). So, this probably isn't a thing that we really need to be advocating for. Instead, we should try to help people understand when Slant is useful vs when Italic is better.

I've started a PR to update the site to Recursive 1.047, and start making a few of these basic changes:

#204

Next steps would be discussing what we do to update the content. Do we try to update a little bit, or a lot?

While this repo was set up as typography it is scoped to variable fonts, so I propose renaming it to variable-fonts and therefore the URL will become https://googlefonts.github.io/variable-fonts

https://css-tricks.com/firefoxs-bolder-default-is-a-problem-for-variable-fonts/

Thank you for the excellent resource!

The current css-fonts-4 spec has an updated syntax for variable font hints: format(woff2) tech(variations). Neither this syntax (which, due to CSS parsing rules needs to be added as a second src declaration), nor previous incarnations (such as the one presented on the website) has any browser support. On the flipside, format('woff2-variations') is supported now and hopefully forever.

I believe it would be better to drop the new syntax altogether.

Links in nav still directing to googlefonts.com, and thus returning 404s.

This issue will be used to collect content for the home page and link to the working content doc:

https://docs.google.com/document/d/1OIzZK-eRhMDoPr3BRZrn7HJN4r_i_5VXqSZ0P3jS66M/edit#

There is currently a placeholder for content for the https://googlefonts.github.io/variable-fonts/implementing-variable-fonts/#gf-ui section:

This section is also mentioned and linked to at the top of the page:

It would be good to remove this placeholder momentarily, so the site doesn't feel like anything is overtly missing, and then add the section back when the content that @jpamental is preparing for it is ready (likely Thursday next week.)

@kennethormandy please could you comment out those 2 bits for now

They can be screenshots or Sketch files. We already have Material components being pulled in, so it's mainly a question of identifying color palette and which components are being used in what context so we can play off the same ideas.

On the font-optical-sizing figure, I'd like a toggle with a fixed position, not 2 radio buttons, so I can click and click again without moving the pointer to toggle it on and off.

The version of Amstelvar used here is the (now very old) Amstelvar Alpha. Please pick up the latest from https://github.com/TypeNetwork/Amstelvar :)

The italic figure sample word is Good but this doesn't have an a or g in it, which the text explicitly mentions, so the sample word should be updated

The narrow viewport's footer's Friends of Google Fonts element is grey on black, unlike the rest of the footer and unlike the wider viewport style. I suggest to just make that narrower element style the same as the wider style.

Wide (desktop) viewport:

Narrow (tablet) viewport:

Nice updates on the Material components (much cleaner than my initial integration), but one issue that surfaced is that the color contrast is too low to pass WCAG AAA size/contrast (one of the mandates for the site).

Also noticed that it needs to be wired in to the color variable names that switch when 'dark' mode is enabled.

https://twitter.com/SaraSoueidan/status/1121645149983891457?s=19

I suggest replacing https://github.com/googlefonts/typography/blob/master/assets/img/google_fonts_lodp.ico with something unique to this site, or not having one :)

This is not an official Google product, so it shouldn't use any Google logos, except https://github.com/googlefonts/friends-badge on the footer

In the opening banner, letters like r only have their correct letterforms in Chrome and Firefox. On Safari, they have the incorrect letterforms, because Safari has a bugs around rvrn.

Letterspacing block rvrn: https://bugs.webkit.org/show_bug.cgi?id=206898

&

Single-character strings block rvrn (that seems to be the main culprit here): https://arrowtype.github.io/recursive/gsub-bug-and-hack_fix-safari/index.html

On Chrome & Firefox, letters have this appearance:

On Safari, they have this appearance (the r, i, and l all have their default forms rather than their mono-specific alternates):

One hack to make things work is to apply a stylistic set that does nothing, such as ss19:

Another hack is to add a zero-width space into each span.

https://twitter.com/PixelAmbacht/status/1199606296665833472?s=19

Now maybe not the best time to include this, but CSS clamp() seems relevant to using VFs.

Eg https://css-tricks.com/how-do-you-do-max-font-size-in-css/

It seems that an errant quote is messing up the layout of all pages. This is more noticeable on pages with backgrounds, such as the "Designing with Variable Fonts" and "Implementing Variable Fonts."

Browsers: macOS Chrome, iOS Safari

• The top toolbar becomes white

• The bizlet logo has black text

Hi there,

There are two JS libraries in use: one Google project (Prettify) and FontFaceObserver. I've cleaned up the code organization to put them both in a top-level directory third_party and have included the license files.

Evan - hoping you're the right Evan to tag in on this! Dave Crossland sent me an email saying these should be approved by you. I'm assuming that the Google project will be fine, and am hoping the same will hold true for Font Face Observer. That is being used to better manage the font loading/display experience for the site.

Please don't hesitate to get in touch if you need more clarification.

Thanks,

Jason

Google Code Prettify
https://github.com/google/code-prettify

Font Face Observer
https://github.com/bramstein/fontfaceobserver

Not sure who has to create this, but guessing we'll want to track it :)

The red ovals on the screenshots (eg /assets/img/gf_ui_1.png) do not look great

I suggest improving them with a 'spotlight' treatment, where a oval mask is applied to a semi-transparent dark layer to highlight the same areas

@jpamental small question, is this site using the built-in Jekyll continuous integration feature called Github Pages; if so, can then there be no master branch, just a gh-pages branch?

Browsers currently have very limited support for font-style and variable fonts.

Test page: https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests/index.html

So, the example of Inter with font-style doesn't work for me, on any current stable browser release. Therefore, I feel it should probably be changed to reflect that state of things, or it may appear that the site of font is broken to users, and they might be confused if they try to use that technique themselves.

On https://variablefonts.io/implementing-variable-fonts/ a Viewport width of 1435 causes the text to overlap the background hero image at the top.

:)

In order to have instructions on the Implementation page on how to get VFs through the main UI we need to get access to some screenshots or the actual UI so we can create them

This issue will track content for the Resources section.

Gdoc:
https://docs.google.com/document/d/1s3XCZTHvo157msE0oGw3hpgrMiwh7A9V0KkTt-hiMxI/edit

www.web.dev has a nice footer copy

• "File a bug"
• "View source"

This feels more actionable and recognizable than "Contribute to this site on Github"... what do you think @jpamental ? :)