Here is a new design to my website - variable is the keyword
With new colors reacting responsively and a new variable font
Nov 11, 2022 · 383 words
Using Work Sans Fixel 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