September 20th 2017
New Zealand font foundry Klim Type Foundry released a site for their new fonts, Untitled Sans and Untitled Serif. We show you how to make the launch site.
- [Rick] Hi, I'm Rick from SuperHi.Last week Klim Type Foundry launched a new typefacecalled Untitled Sans, and with it they made a web sitecalled UntitledSans.com.Now, the idea of the web site is you can scroll up and down,the font gets larger, or smaller, as I move my mouse wheelup and down the page.So a few of my students asked, "How was this made?"So I just wanted to show you very, very quicklyhow this came about.So, I've started with a kind of blank project to begin with.So there's nothing in my index.html.I have no content as part of my page.So with this, what I'm gonna do is quickly just adda divider tag, and then put in two paragraphs.One that's gonna say, here is the typeface.
And then the second line, which is font size is.Let's start with 12 pixels, to begin with.12 pixels.Now, this is the content of the page.I can then style it up using CSS.Now, I've given it some default style.The font family, I'm gonna start with Helvetica.I've given it a base font size of 12 pixels.Then the line height is a multiplier.It's 1.1 times the font size.So as this font gets bigger and smaller,the distance between the lines multipliesin the same consistent fashion.Now, the background color, I've given it a black,kind of gray color.And the text color is a black color as well.So we can see the project.Currently it looks like this.Now, I want this to not just be in the top left cornerof my entire page.I'm gonna need it slightly in.I'm also gonna give it fixed position,so I scroll up and down the page,It will keep in that same corner.So on that divider tag, the div tag,I'm gonna give it position fixed,so it stays in place as a scroll.I'm gonna put the top corner as 20 pixels,and the left as 20 pixels as well.Now, we've just moved it slightly infrom the top left corner, but I want to be able to scrollup and down the page.So how do I do that?With this whole page, I'm going to give it a heightof around 6000 pixels, just something really, really large.So now, on this page, I can scroll.You can kind of see on the right hand side,I'm scrolling up and down my page.I want to change this on scroll.
So because this is an event,I'm gonna use jQuery to help me out.Now, I've downloaded the jQuery filefrom the jQuery.com web site.I'm just gonna drag it into my project.Now with this I want to add my own code,so I'm gonna make one called scroll.js.File names don't really matter, scroll.js to begin with.Now, I want to be able to attachboth of these files to my content.So, back to my index.html.Just gonna add two script types.One is gonna be the jQuery, and one is the filethat we just made, called scroll.js.
What do you want to do on scroll?Well, we need to do something.We're gonna run a functionevery single pixel that we scroll down the page.So I'm just gonna open these upjust to make it a little bit easier to read.First thing I want to do is find out how many pixelsdown the page that I have scrolled.So I'm gonna make a variable called pixels.Now this is gonna equal to something in jQuerythat I've already looked up.This is gonna be equal to documents, scroll top position.
Now, cut to T for the top.Again, this isn't a jQuery document,so you go to jQuery.com to look up this.Now, the next thing I want to do is change my if tagto be the size of the pixels.
So I'm gonna select the if tag.You need some quotes, because if is not a special word.And in my CSS, I want to change the font sizeto the amount of pixels that I've scrolledup and down the page with.So now if I scroll up and down the page,you can see how the page gets bigger.The font gets bigger and larger.Now, you might notice if I scroll right to the top,my font disappears, because it's off the page.I'm zero pixels down, therefore my font sizeshould be zero as well.I want to fix this to be 12 pixels.So what I'm gonna do, back in my editor,I'm gonna make a new variable called font.This is gonna be equal tothe amount of pixels down the page I am.And I'm gonna add a little buffer to begin with.So, when we're at zero pixels, we're gonna be 12.Zero plus 12.Now, because I made this new variable called font,Again, variables can be called whatever I like.I'm just gonna make pixels now the font.
So the top font size is 12 pixels,and they get bigger depending on the amount I've scrolled.Now, I might not want it to grow so quicklyas I scroll down the page.I want to kind of limit it a little bit more.So what I'm gonna do here is divide my pixels by 10,to just slow it down a little bit.So the top of the page, I'm still at 12 pixels,and this grows 10 times less of the speed now,as I scroll up and down the page.Now, what I'm wanting to do as well is change,the font size is 12 pixels,to be the actual font size itself.Now, what I'm gonna do is just quickly go backto my index location hub.I'm gonna put a spam tag around 12 instead.
This doesn't change how it looks.It's just a tag.It's an inline tag.Doesn't do anything at the moment.But what I'm going to do is change that spam tagto say that actual amount of pixels that it should be.So in my scroll now, still whenever I scroll any pixel,I'm changing the font size.But I also want to change the spam tag as well.I don't want to change the CSS.I want to change the HTML for content.Now, what is the content going to be?Well, it's gonna be the number,it's gonna be this font variable here that we've just added.So I'm gonna change the HTML of thisto be this variable called font.So now I scroll up and down the page,you can then see how it's changing accordingly.So this was very, very quickly.We've done this in about five minutes,and a very quick website to make.If you want to see the kind of final site,we can see it at scroll-wheel.superhi.com.