I’m just putting the final touches to my debut stack, but I wanted to share this demo because… well, I‘m pretty excited about it!
LockUp brings the power of modern web typography to Stacks. OpenType features, the full range of abilities of variable fonts, container units, colour variables (it plugs straight in to Source and F6 colours, as well as your own palette), multi-colour gradients, images in type, even pair kerning! But I built it to solve some problems I came up against all the time. Particularly the problem of ‘lock ups’. Lock up is the graphic arts term for situations where you want to put several elements together in an exact relationship — often type and symbols (modern logos are the most obvious examples of lock ups), but they’re also often type with type. Magazine-style headlines, and pulled out quotes are another example. Wherever we want to use type to make a get-noticed arrangement, we use a lock-up.
I stumbled on a way to lock stuff up using Grids. If you have several grid elements all with the same position, you’ve effectively got a set of layers. And if you put your elements on these individual layers, you can arrange them without messing everything else up in your layout. With container queries, these sets of layers can be dropped into spaces large and small, and scale perfectly. Still, the positioning takes a fair bit of coding. It occurred to me that all this could be done much more efficiently with a stack, so I set to building it. The result is LockUp.
But if you want to see what it does, have a look at the demo. It’s built entirely with LockUp stacks. Really! On a blank theme. And even though it uses containers, thanks to Google’s amazing container query polyfill, even Firefox is rendering it perfectly (it’s backwards compatible for several years of browsers). LockUp includes a responsively scaling SVG child stack, so that vector graphics will size and position correctly with the type at every viewport, and a stacks child stack, so you can include photographic images and other stacks content. The demo will be available as a RW file in the project, along with the public domain fonts to experiment with (including Henrique Beier’s amazing color and variable font Rocher, which you can see in the demo). LockUp is going to be on sale for $24.99 (assuming that’s not £500 by the end of tomorrow!)
Out of curiosity is this Lockup something that works in isolation (on its own stacks) and you’d use alongside Font Pro, or is it page wide and could replace it?
It’ll work in isolation — it’s so easy to add (site or page wide) fonts in the RW CSS panels, and there will be plenty of examples in the demo project (variable and not), but it works with Font Pro and other font loaders too (the LockUp text stack just needs the font name). I wasn’t expecting to build pages just with it, but I realised I didn’t need anything else to make the demo page. I’m testing it with a Blank theme, Source and F6 — I don’t have Foundry, UI Kit or Platform, but I can’t see any reason why it wouldn’t play nicely with them too.
Thanks James, this stack set is amazing! Instant buy. But I have one question: I see that you can define the “Font family” to be used. But from where are these fonts loaded? If they are automatically loaded from Google it would be bad, because this is strictly forbidden here in Germany according DSGVO. Here we will have to install the Google fonts on our own servers and call them from there.
Is there the possibility to use your stack together with Joes “Font Pro” stack? Or will it work with a css stylesheet which loads the fonts from the server?
I can’t really answer for James, but a quick peep under the hood using Inspector, reveals that the fonts are loaded locally, and very likely from Source. I presume James used the built in facillty in Source to load local fonts, so need to use an additional stack to load fonts, such as FontPro.
Thanks Gary. I’m solely using Foundation 6 (together with Font Pro); so I hope the Lockup stack will also work with this configuration. Some instructions from @jamessouttar how to use locally installed fonts with Lockup would be great.
It will work with Source or Foundation font loading, or that provided by any other stack. These days I find it easier to load fonts with CSS, either in the site or page panels in RapidWeaver. It’s easy to cut and paste, and just a matter of changing the font URLs and giving the family a name. The LockUp demo page shows the fonts loaded in the RW site CSS panel. But the general principle is that, for a normal (‘static font’) you need to add something like this:
With the range of the variable weight axis. In my experience it doesn’t seem to be necessary — in LockUp’s controls you can set the font axes. And if the value you set is too low, the font will simply take the lowest setting it has for that axis, and likewise with the maximum. When using variable fonts, though, it is a good idea to have the information for their axis settings (usually this is a matter of going back to the font creator’s website).
Here are some URLs for the sites for some of the free variable fonts I’ve used in the demo project. They’re nice sites, and they have useful information and show what the fonts can do.
Piazzolla
and it’s own micro-site
Recursive
(I love this site. And recursive has some interesting custom axes, too.)
Rocher
Rocher is also a color font, and Henrique has an interesting blog piece on color fonts. You can choose color combinations for the font on the site, and download the results.
Playfair 2.0
(Amongst other things Playfair does something really interesting with the optical axis: it keeps the hairlines in the characters consistently at 1px for all sizes from 5px to 1000px. This solves the problem of high-contrast ‘Modern’ fonts, where they become dazzling and illegible at small sizes. Playfair 2.0 at 5px has a really robust design, and is super-legible!)
Arizona
Arizona is the all-singing all-dancing poster boy for variable fonts, which can change from serif to sans-serif. It’s really interesting to see what the designers have done (unfortunately I just don’t like it very much).
Montserrat
Just has a weight axis, in roman and italic, but it’s a lovely sans serif.
@ jamessouttar
I bought your stack Friday, I did not receive a download link.
Try 2 times to reach you form your support email (contact@mubediat.com)
in the Paypal transaction that I receive and emails does not work.
Yes, I did (of course, since this stack really is a gem). :-) The order process worked just fine and I got my invoice and download link in it instantly via email. Hope to put Lockup to use in one of the next client sites I’m building…