Variabilní písma, grade a CSS. A realita.

Jako správný naivní neznalec typografie jsem prostě použil nějakej líbivej font s rozumnou licencí, přesněji Quicksand od Andrew Paglinawan (GitHubu, Google Fonts). Je fajn, to přece půjde, říkal jsem si. Jenže pak přišly problémy a nutné si zašpinit ruce tou typografií, tedy asi inkoustem. A zabil jsem tím pár večerů.

Myšlenku jsem měl takovou, že nabídky menu budou horizontálně vedle sebe a vybraná sekce bude zvýrazněná tučně. To sice je triviální, ALE klasické tučné písmo přirozeně zvětší konktejner, ve kterém zrovna vězí. Takže se všechno vpravo od kontejneru posune. Možné napodstatné, ale když lpíte na detailech jako já. No pojďme tam nejít.

Problém je to možné vyřešit několika způsoby a všechny jsou docela prohra. A všechny jsou popsány nějak tady na stackoverflow. Ve stručnosti:

1. Nějak ten tučný font emulovat stínem. Což vypadá strašně, zejména na Apple zařízeních. Ne, díky.
2. Pomocí css :after a content trikem vytvořit neviditelnou, tučnou náhražku, co udává velikost. Což ale může mít za následek, že vzdálenosti na některých zařízení budou vypadat rozbitě, protože nerespektují bold vs normal rozdíly. A zároveň vám můžou některé prohlížeče jakoby znovu přerenderovat stránku kvůli těmhle trikům, dojde tedy k přebliknutí (určitě se to děje na Firefoxu). Ne, díky.
3. Použít jiný font, který je variable. To je novinka předchozí dekády, která umožní mít všechny možné tloušťky mít v jednom souboru. No a hle, Quicksand je taky variable. ALE nepodporuje grade. To je nepovinná vychytávka variable písem, která ztuční písmo bez potřeby změnit šířku samotných písmenek. JENŽE variable fontů moc není, a s grade je jich ještě míň.
4. Jít cestou uniwidth, což je několik písem z jedné rodiny, které sice mají různou tloušťku ale stejnou velikost písmen. JENŽE těch je taky málo!

Pokud se něco nezměnilo, Quicksand písmo tady nakonec nenajdete. Prohrál jsem s ním. Skončil jsem nakonec s variantou 4., konkrétně s jiným písmem Recursive od studia ArrowType (GitHub, Google Fonts). No, aspoň se normální text čte líp.