Line-height – praktyczne zastosowanie

Zawsze podkreślaliśmy, że znajomość CSS chociaż w niedużym zakresie, jest bardzo przydatna, jeżeli mamy własną stronę na WordPressie. Niektóre rzeczy można bowiem ustawić samodzielnie, korzystając dosłownie z kilku linijek własnego kodu. Dzisiaj o praktycznym zastosowaniu line-height.

W CSS line-height (wysokość linii) to właściwość, która określa odległość między wierszami tekstu w elemencie HTML. Innymi słowy, parametr ten kontroluje ilość przestrzeni pionowej pomiędzy kolejnymi liniami tekstu. Dzięki temu możemy zadbać o odpowiednią przejrzystość tekstu umieszczonego na naszej stronie internetowej i tym samym o cały jej wygląd.

Po co nam line-height?

Domyślnie wysokość linii jest równa rozmiarowi fontu używanego w elemencie, ale czasami chcemy ten parametr zmienić, właśnie z uwagi na czytelność zamieszczonego tekstu. Wpływ na to może mieć np. rodzaj użytego fontu, budowa layoutu i po prostu własne odczucia estetyczne.

Możemy określić wysokość linii na kilka sposobów:

• wartość procentowa – ustawi procent rozmiaru fontu. To znaczy, że na przykład line-height: 150%; ustawi wysokość linii na 1,5 razy większą od zadeklarowanego przez nas rozmiaru fontu.
• wartość liczbowa – stosowana, aby określić wysokość linii w pikselach (px), em, rem lub innych jednostkach typograficznych np. 20px; ustawi wysokość na 20 pikseli,
• określenie przez słowo normal ustawi wysokość linii na wartość domyślną.

Wysokość linii na różnych urządzeniach

Jeżeli chcemy nauczyć się kontrolować typografię na naszej stronie internetowej, warto pochylić się nad właściwym dopasowanie line-height. Dzięki temu mamy realny wpływ na wygląd naszej witryny, niezależnie od domyślnych ustawień, jakie proponują nam twórcy wybranego motywu.

Przy okazji to bardzo przydatne narzędzie do dopasowania czytelności tekstów na różnych urządzeniach. W przypadku większości builderów można line-height dostosować do typu ekranu (inny na komputerach stacjonarnych, inny na smartfonach itp.). Oczywiście jeżeli nanosimy zmiany niezależnie od używanych builderów, możemy swobodnie samemu określić te parametry dla danego typu urządzeń.