Jedna ważna zasada typografii, która poprawi czytelność Twojej strony. | DailyWeb.pl

Jedna ważna zasada typografii, która poprawi czytelność Twojej strony.

Opublikowano 1 rok temu - 4


Tim Brown w 2012 roku opublikował, „molten leading”, w której zawarł ważną zasadę typografii, którą do dziś stosują programiści. Chodzi mianowicie o zasadę wysokości odstępu linii dopasowywaną do szerokości okna w którym wyświetlany jest dany tekst. Im szersze okno tym według Tima line-spacing powinien być większy.

Okazuje się, że według Tima istnieje kolejna złota zasada typografii, którą postanowił podzielić się ze światem. Wymyślił on kawałek kodu gotowy do implementacji w kodzie CSS, który pozwoli nam na dopasowanie idealnie wysokości linii do szerokości urządzenia czy też okna. Formuła Tima przewiduje skalowanie wysokości linii w wartościach od 1.3 do 1.5 dla szerokości 21em do 35em, poniżej wartości wysokość linii pozostaje stała z wartością 1.3, analogicznie dla szerokości powyżej 35em.

Diagram of a CSS lock

Źródło: http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks

 

Oto fragment kodu gotowy do implementacji, który oblicza odpowiedni line-height dla okna o szerokości od 21 do 35em

line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));

 

A tutaj, możemy zobaczyć przykładowe działanie oraz kod źródłowy przedstawianego rozwiązania. http://codepen.io/timbrown/pen/akXvRw/?editors=0100

See the Pen CSS calc lock for line-height by Tim Brown (@timbrown) on CodePen.

Oczywiście formułę Tima możemy edytować według własnego uznania, lecz jednak osobiście wolę trzymać się reguł ustalonych przez profesjonalistę i to również wszystkim początkującym czy średniozaawansowanym z was polecam.