Nov 11, 2022 · 382 words

• blog
• dev

Using Work Sans variable font to choose …

whatever weight I want

This is really nice to adapt weight to very use case. Just like this :

The Story of Typewriters is a title1

In the Country of the Last Things is a title2

The Swiss Team has won the Solar Decathlon competition would mean 3

The strength of the Swiss team consists in its multidisciplinary cohesion is 4

This project also provided the students with a unique, unforgettable, and inspirational learning opportunity is 5

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A matter of footprint

Using a variable font with 900 different weights allow to have only 1 file loaded. But the original TTF is 300ko. After a special treatment, the woff2 is only 30ko.

How to compress a variable TTF font

installing Python, pip etc …

sudo port install python39
sudo port select --set python python39

Install fonttools to manipulate font files

pip install fonttools
pip install brotli

Remove all glyphs except basic latin characters (punctuation, digits, letters)

fonttools subset WorkSans\[wght\].ttf  --output-file=worksans.ttf --unicodes=U+0020-007E

Use woff2 library to convert TTF to WOFF2 or using fonttools in only one line

fonttools subset WorkSans\[wght\].ttf  --output-file=worksans.woff --flavor=woff  --unicodes=U+0020-007E

I am really happy with Work Sans

Variable color scheme

My CSS goes with variable constructed around HSL attributes

:root {
	--color-h: 225; /* Hue General */
	
	/* background */ 
	--bg-color-s: 80%; /* Saturation */
	--bg-color-l: 96%; /* Lightness  */
	
	--bg-color: hsl(
  	var(--color-h), 
  	var(--bg-color-s), 
  	var(--bg-color-l)
	);
}

Then with a little unobstructive Javascript

function gethue(){
  const x = 1 - (window.innerWidth) / 10000;
  const actual_color_hue = getComputedStyle(document.documentElement).getPropertyValue('--color-h');
  document.documentElement.style.setProperty('--color-h', Math.round(300*x));		
}
gethue();
window.addEventListener('resize', () => {
	gethue();
})

Just try resizing the page to see it in action.

Or simply drag the following input