At school, I have a course on UI/UX design. And I got and assignment where I have to create a portfolio website with some principles in mind. To start, I opened Figma and start prototyping some draft before firing up my code editor. I made a lot of research to make the best choices about colors, typography, spacing and a lot of other details that can enhance user experience. And while coding, I find two CSS features I didn't know about yet.

Variables Fonts

For my project, I decided to use Nunito Sans and Lora as font. When I downloaded them from Google Fonts, something draws my attention: Lora offers both static and variables fonts. What is that🤔? Generally, when using custom fonts, we have different font files for different styles (light, regular, medium, medium italic, bold...). These are static fonts.

Instead of this, variable fonts give you all of those variations in a single file. So you don't include a bunch of files in your code but only one. Here is the advantage according to MDN:

The advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to the only few that you would have previously loaded.

To include a variable font like Lora in our CSS, we use @font-face like we do for static fonts, but we have more customization options:

  @font-face {
    font-family: 'Lora';
    font-style: normal;
    font-display: swap;
    font-weight: 1 999;
    src: url(../../assets/fonts/Lora/Lora-VariableFont_wght.ttf) format('truetype-variations');
  }

Some differences you might notice:

• The specified format is truetype-variations instead of just truetype. It's not a mistake if you omit the -variations part.
• font-weight: 1 999: This demonstrates all the power that variable fonts bring to you. You can modify different axis of the font(i.e how wide, italic or not, ...). In this case, we define that our font weight could take any value value between 1 and 999. Traditionally, we would have to choose between 100 and 900 with a step of 100.

Apart from the weight, we can use the font-variation-settings to modify other axes like:

/* Weight axis */
font-variation-settings: 'wght' 625;
/* Italic (0 for off, 1 for on) */
font-variation-settings: 'ital' 1;
/* Oblique (defines the angle of letterforms) */
font-variation-settings: 'slnt' 12deg;
/* Optical Size */
font-variation-settings: 'opsz' 60;

They could also be custom axis depending on your police.

I'll stop here. To learn more, check the MDN article.

Scroll Snap

An effect that would be interesting for this project was scroll snapping. Whenever the user scrolls, the page will snap to specific points. I didn't want rely on JavaScript for that as I have to really care about the performances of my website. So I searched for a way to do that in pure CSS. All we need is a container for the scrolling, and his direct children will determine the points the page snap to. We apply this set of properties to the scroll container:

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

All the magic happens with the last property. We set the snap on the vertical axis and me it mandatory meaning the snapping will always happen. We could replace it with proximity which instructs the browser to go to a snap position only if a scrolling action gets pretty close to this position. Finally, giving a fixed height enable the see the scroll bar.

We also have to add some properties to the scroll container children:

.scroll-container > .child {
  height: 100vh;
  scroll-snap-align: start;
}

Here we set the snap position to the top of each child. And that's all to get this cool effect! Take a look at the pen below to see it in action.

That's all :). Thanks!