jpamental / variable-fonts Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
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://create.adobe.com/2018/5/22/variable_fonts_are_t.html
https://www.nngroup.com/articles/variable-fonts-wide-screen-layout/
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.
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.
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:
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 sectionCRSV
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.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:
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
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.
The version of Amstelvar used here is the (now very old) Amstelvar Alpha. Please pick up the latest from https://github.com/TypeNetwork/Amstelvar :)
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.
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.
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/
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
This feels more actionable and recognizable than "Contribute to this site on Github"... what do you think @jpamental ? :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.