Inspired by Stuart’s and Gary’s examples, I’ve been exploring what Source Grid and Splider can do. This is the first demo I’d like to share: it’s a shameless plagiarism of one of the examples of 1LD’s great ‘Swoop’ stack (and there’s a reason why a $15 stack is amazing value, which you discover when you spend hours recreating and troubleshooting your copy!) Nonetheless, I felt this was a great challenge to see what the Source Grid and Splider combo can do.
And I realise that thinking of Splider as just another slider is a big mistake — it can be so much more!
Things I’d draw attention to here. There are two linked Spliders. The Splider on the right, with the Events cards, is doing the usual slide-shuffling thing. The Splider on the left, which is controlling things, is set to ‘Carousel’ mode (so on a perpetual loop) and to show five slides at a time. Splider is highlighting the current slide (and the non-selected slides are reduced in size and opacity to accentuate this effect). I’ve also put a semi-transparent image over the top, which is creating the fade into the edges.
This example also uses variable fonts. This is the free (‘libre’) Montserrat font from Argentinian designer Julieta Ulanovsky and colleagues, and it can be downloaded from here Montserrat Variable Font (Google have Montserrat for download only as static, desktop fonts). It has just one variable axis: weight from 100 (thin) to 900 (heavy). In this case the font is specified in the usual way through Source’s settings, and activated through a couple of lines of CSS. (I’m intending to put together a tutorial for variable fonts in Rapidweaver in due course).
[Monsterrat-VF is 123kb in size. This project is using just three weights — 500, 620 and 740. The nearest equivalent with static fonts, using weights Medium (500), Semi-Bold (600) and Bold (700) would weigh in at 731kb, and involve three separate downloads. So not only can variable fonts be fine-tuned, but can significantly reduce download times. And once downloaded, the browser can produce an endless number of different instances from them.]
That is seriously impressive @jamessouttar! Exactly the kind of out of the box thinking that I set up Splider and Grid Plus Pro to allow for!
As for the Firefox issue…it might be worth moving your syncNav1.go( '+' ); command inside an event listener instead (to listen for a click of the button).
James,
Thanks for the link to the Montserrat Var font. I have been playing about quite a bit with Var fonts in Source and just completed my first Var font site using OpenSans Var.
However, I have been trying without success to use a single Var font with both Normal and Italic. I was wondering if you have had any succes with such a combined font?
As you mention, a couple of lines of code can enable the Source Paragraph and Header stacks to access the different weights from within the stacks settings.
Regarding the demo, if you enable the drag slide feature, you would create a very usable mobile version that would allow flicking through the months using your thumb.
Gary, from what I can make out it seems to be a live question in the type design community whether to include an Italic or not in a variable font. Many, like Montserrat, keep them as separate fonts. The problem is that where Italic is included, it‘s usually a binary toggle between Roman and Italic (in variable font terms, each is its own world with masters for each axis). There are a small number of variable fonts where there is an axis between Roman and Italic, where one changes into the other, but they‘re mostly experimental — there isn’t really a use case for this. Most simply switch.
However this means doubling the size of the font to support an entire Italic world. This touches on the other big development in type design at the moment: supporting bigger and bigger character sets. Most type designers now are including characters for every language with uses the Roman alphabet — the Greenlandic ascender-less k, the Icelandic eth and thorn, accents for South East Asia. They‘re also including a large number of Opentype features: small caps, four types of full size numbers and three sets of smaller ones, every currency marker, and alternative characters. This is a good thing, of course, for speakers of more obscure languages and people who need typographic niceties (like the publishers of academic books). But it adds a lot of bloat for everyone else (Montserrat, for instance, does all of this and also includes the same for Cyrillic script!)
And there‘s the problem — I’ve just italicised one word in this post. Do I need a double-sized font for one word?
So the other big thing that seems to be happening in the type design world — at least as it relates to the web — is the idea of ‘dynamic subsetting’: automatically identifying which parts of a font you need and downloading just that. Google are doing this, at least with fonts which include Kanji characters, and so are Adobe on Typekit. But there isn’t yet any standardisation. And which is the best way to do it? By identifying languages? Or does the browser have to scan the DOM and identify which bits of fonts it needs? (And then how do we extract just enough of the Italic font to italicise also?)
At the moment there are only a couple of Open Source command-line programs which can make subsets of variable fonts — FontSquirrel, etc. just turn them back into non-variable fonts. I’ve been thinking about this, and the way that I’d probably go about it is to make a basic instance of the Italic font for the text size/weight/whatever I’m using for text (so have a full Roman variable font and a very light little static Italic). But I can do this from Glyphs. Most web designers can’t really justify having a heavyweight type design application to make instances, though.
There is an obvious need for a free or low cost font subset tool to remove the unwanted character sets.
What I have found is that I really like the process of choosing a font weight with Var fonts which is far better than guessing what weight you want, downloading and converting it and then finally trying it. It’s an ideal use for a stacks slider to select the font weight live in edit mode.
I suspect that a normal Var font with the capability to use the slant axis would be good enough for the normally low use of italic characters. My aim here is to load 1 Var font to do everything that is smaller in size to multiple conventional fonts and to allow careful selection of font weight.
Is a very good point — it makes a huge difference to be looking at a preview and adjusting the weight, to find that sweet-spot. Since there is no stack to do this at the moment, the way I think I’ll go with it is to have some sandbox pages on the site for playing around with this. I did manage to build a slider (not a splider here!) with F6 forms and Pi, in Source, which does this. (However I can’t get the font to update in realtime — only when the slider is released. I‘ve seen it done elsewhere, though, so it must be possible). It’s also a bit frustrating that there isn’t a general purpose forms set in Stacks with a good slider — I was delighted when Joe said that F6 forms work with anything, but then I had them already. And at the moment while all this can be done, it’s not simple: a good variable font stack would make a huge difference.
And you’re right about the drag feature (hence my previous question here to Stuart). With it enabled on touch devices you can go ‘wheeeeee’ — just like Apple’s date and time wheels. But on desktop it’s click-drag, which sadly isn‘t the same thing at all. I’m intending to make these demos responsive — they aren’t yet — and I’d like to experiment with that Apple time wheel effect, because it’s something I like very much on mobile.
I would expect that in the current Source Header and Paragraph stacks, that if the drop down selection of font weights 100 to 900 was replaced with a slider with a resolution of 1 from 100 to 900, that that would work in an ideal way for Var fonts.
Update. After a quick and dirty stack edit, this is indeed how a weight slider would work.
This demo now fixed for FireFox (92.0.1 on Big Sur), thanks to Stuart’s suggestion to add an event handler to the button code. (Seeing as 24 hours ago I thought an event handler was someone who tried to fix a party that was going badly wrong, I am seriously impressed with myself — got there on the umpteenth attempt! 😃)
If you want to play with variable fonts then this is a good font to use as it has so many variations (way beyond the few W3C ones).
It is what I used to develop the vf type stack (unreleased as yet)
I’m excited for the vf font stack, Andrew! I know you’ve been working on a whole bunch of other stuff, but… any chance?
Variable fonts is one of those technologies which has had to bootstrap itself — from the beginning it was interesting, but there was nothing one could do with variable fonts, and hardly any of them to do anything with. Quite quickly that’s all changed: they’re now supported in all current browsers (and there are quite simple fallbacks for people still using Microsoft Flintstones) and there are more and more of them, too. I’m noticing many type designers releasing new fonts with variable and static together (which is a bit like a musician releasing an album on vinyl and download at the same time). Adobe are now supporting them in their publishing products too, although I’m sad to see Affinity dragging their heels here.
Amstelvar is great (and David Berlow has come to variable with a stellar portfolio of quality type design). The ability to adjust the x-height, ascenders, descenders and other things is something I’ve not seen before, and is a nice feature. Dinamo Typefaces ‘Arizona‘ is another VF showing the amazing range VF is capable of — its ability to turn from serif to sans-serif is impressive.
For VF to prove itself, though, it can’t just be bells and whistles. Many of the early offerings were ‘Wow, that‘s cool… but would I want to use this?’ Now, though, VF is supporting readability (as well as reducing downloads). And optical size, ‘opsz’, seems to be the key axis here. The ability to have something which can read really clearly as continuous text on a phone, yet scale up with sharp, elegant details as a headline, has long been a typographic Holy Grail. As a learning exercise I’m developing a variable version of Gustavo Ibarra’s ‘Buenard’ (which is an open source project) which will do ‘wght’ and ‘opsz’ within normal — rather than extremer — ranges. Weight is done, and I’ve also added an Italic. It will be a good little workhorse.
That’s a very useful site to see what eatures can be modified and also what the variation of those features are. I chased my tail a bit trying to configure a variable font trying to increase the slant beyond 10 degrees, only to find out on the v-fonts site that the limit for that font was 10. I will certainly checkthat site first.
The Amstelvar font has an amazing array of customisation, but what seems a bit strange is that it doesn’t have slant. There is certainly enough customisation for users to create the most monsterous fonts.
Gary, this is a great site for testing variable fonts, if you haven’t come across it before: https://wakamaifondue.com
Basically you drop a font into the circle in the middle of the 1970s fondue on the homepage, and the site will show you its different aspects: stats, the variable axes (with sliders to test them, and a block of text as well as a headline to test them on), full character set, defined instances, OpenType feature sets. And it generates some really useful CSS to get around inheritance problems with font-features-settings and lack of support on older browsers for font-variant-*. It’s a real gem.