8 dodatków, stron i źródeł do kodowania typografii na stronie

Chociaż mówi się, że żyjemy w epoce obrazkowej, a tekst w internecie jest coraz bardziej marginalizowany, czytelność strony nadal jest jednym z najważniejszych wyznaczników dobrego UX.

O czytelności strony i jej przejrzystości decyduje przede wszystkim typografia oraz stosunek wysokości fontu do interlinii.
Jak zachować je w stronach responsywnych? Jak dobrać krój liter, aby ułatwiał lekturę i nie zniechęcał czytelników do zapoznania się z zawartością strony?
Narzędzia z naszej listy pomogą wam szybko rozwiązać te problemy.

Typografia na stronach www – dodatki dla web designerów

Gutenberg
Źródło
Do czego służy ta aplikacja mówi już samo nazwisko drukarza, któremu zawdzięcza swoją nazwę. To zestaw reguł stylu poprawnej i eleganckiej typografii internetowej. Gutenberg zawiera takie ustawienia, jak wysokość linii bazowej pisma, wielkość fontów, skalowanie i wysokość. Dobra biblioteka stylów, jeśli chcesz sprawić, żeby zawartość twojej strony wyglądała lepiej.

Utility Open-type
Źródło
To zestaw klas CSS, dzięki którym wprowadzisz do projektu zaawansowaną typografię, taką jak na przykład kapitaliki czy ligatury. Dlaczego ma to znaczenie? Te dodatki budują wrażenie profesjonalizmu, a także ułatwiają czytanie i sprawiają, że tekst staje się bardziej przyjazny dla użytkownika.

Fontea
Źródło
Co w tym zestawieniu robi rozszerzenie Photoshopa? Tak użyteczne jak Fontea może być dużym ułatwieniem dla web developerów. Rozszerzenie umożliwia korzystanie z setek fontów Googla bezpośrednio z poziomu Photoshopa. Obejrzysz font i wprowadzisz go do projektu kilkoma kliknięciami myszy – bez otwierania dziesiątek stron i przekopywania się przez biblioteki fontów.

FlippingTypical
Źródło
To małe narzędzie pozwoli ci uzyskać szybki podgląd wszystkich fontów zainstalowanych w systemie. Jej działanie jest podobne do aplikacji FontBook w macach: wpisujesz przykładowy tekst i sprawdzasz, który z fontów, jakie posiadasz, najbardziej pasuje.

Mononoki
Źródło
Męczy cię, że kiedy kodujesz, znaki „l” „I” oraz „1” są niemal nie do odróżnienia? W takim razie skorzystaj z nowego bezszeryfowego fontu monospace, jakim jest Mononoki. Zapiszesz go jako gotową do zainstalowania czcionkę w formacie .ttf oraz jako fonty webowe (.eot i .woff).

OverPass Font
Źródło
To font inspirowany krojem Highway Gothic, który z kolei jest czcionką wykorzystywaną na amerykańskich tablicach i znakach drogowych. Nieprzypadkowo – jest doskonale czytelny i „nie rzuca się w oczy”. Font OverPass występuje w czterech typach: cienkiej, normalnej, półgrubej i grubej, oczywiście z wielkimi i małymi literami. Może być łatwo przekonwertowany w font webowy.

Typeslab
Źródło
To proste w obsłudze narzędzie do tworzenia grafik podobnych do plakatów. Wystarczy, że wpiszesz swój tekst, wybierzesz krój pisma – głównie ciężkie groteski i egipcjanki – i dopasujesz tło. Gotową grafikę możesz zapisać lub wrzucić na Imgur.

HTML Arrows
Źródło
Ten link zawiera zestaw symboli w natywnym Unicode, których możesz użyć w HTML i CSS. Oprócz strzałek znajdziesz tu także znaki przestankowe i symbole walut. Wygodne, jeśli nie chcesz używać fontu z symbolami tylko po to, żeby skorzystać z jednego znaku.

Znacie jeszcze inne narzędzia, które ułatwiają deweloperom i webmasterom pracę z krojami pisma, plikami audio i wideo? Chętnie dowiemy się o nich z waszych komentarzy!

Zapisz

Zapisz

Zapisz