Niezależnie od tego, czy jesteś projektantem, twórcą stron internetowych, czy codziennym czytelnikiem, prawdopodobnie zauważyłeś, że sposób czytania tekstu w sieci bardzo się zmienił. Jest to wynik rosnącej liczby osób korzystających z Internetu oraz różnych sposobów, w jakie wykorzystują go do komunikacji. Ale w jaki sposób zachodzą te zmiany?
Z radością przedstawiamy materiał, który powstał w sojuszu z bezrobotnik.pl
Czcionki internetowe
Stosowanie czcionek internetowych może radykalnie zmienić sposób projektowania typografii. Czcionki internetowe to pliki, które są pobierane automatycznie przez przeglądarkę, gdy odwiedzający wchodzi na Twoją stronę internetową.
Najpopularniejszymi dostawcami czcionek internetowych są Adobe Fonts i Google Fonts. Te czcionki są pobierane z innego adresu URL i ładowane do twojej strony internetowej razem z twoimi własnymi plikami. Używanie czcionek internetowych może wpłynąć na wygląd i odczucia strony internetowej, jak również na jej układ.
Aby użyć czcionek internetowych, najpierw musisz określić, jaki format chciałbyś użyć. Istnieją dwa główne formaty, których możesz użyć: WOFF2 i OpenType. WOFF2 jest preferowanym formatem czcionek. Format ten obsługuje zarówno specyfikacje TrueType, jak i OpenType.
W czcionce internetowej można określić font-variant lub font-stretch. Font-stretch spowoduje, że czcionka będzie się rozciągać i wyglądać na bardziej zaokrągloną. Użycie font-variant pozwala na użycie wielu odmian tej samej czcionki. Na przykład, można użyć czcionki bezszeryfowej do nagłówków i czcionki szeryfowej do body copy.
Oprócz font-stretch, możesz również określić font-size i x-height. Te miary są używane do budowania skali twojej typografii.
Kolejnym ważnym elementem typografii internetowej jest przestrzeń. Może ona poprawić lub zdezorientować twoich czytelników. Możesz chcieć zwiększyć wysokość linii lub odstępy między literami, aby ułatwić czytanie tekstu.
Kontrast i przestrzeń są również ważnymi czynnikami w dobrej typografii. Użycie zbyt dużego kontrastu może utrudnić czytanie tekstu przez dyslektyków.
Kolejnym rozważaniem jest kolejność, w jakiej używane są Twoje pliki czcionek. Może być najlepiej zacząć od większego rozmiaru czcionki i skalować go w dół w miarę używania mniejszych krojów pisma.
Czcionki zmienne
Tradycyjnie, typografia w sieci była mierzona w stałych wysokościach i stałych stylach. Dziś sztuka komunikacji wizualnej przechodzi do nowej ery projektowania responsywnego. Podejście to ma na celu sprostanie wyzwaniom związanym z dostępnością. Tworzy się je wokół siatek elementów, które poruszają się i zmieniają rozmiar wraz ze zmianą rozmiaru ekranu.
Dzięki wprowadzeniu zmiennych czcionek projektanci stron internetowych mogą odblokować tysiące wariantów stylów czcionek. To daje im większą elastyczność w wyborze czcionki, która pasuje do ich potrzeb. Oprócz tego zmienne czcionki odblokowują również animacje czcionek i niestandardowe style czcionek. Jest to duży krok w kierunku uczynienia sieci bardziej atrakcyjną i czytelną.
Czcionki zmienne są częścią specyfikacji formatu czcionek OpenType. Czcionki te umożliwiają dostęp do tysięcy różnych wariantów typograficznych przy użyciu tylko jednego pliku. Można wybrać wagę, szerokość i szereg innych cech.
Istnieją dwa główne sposoby sterowania tymi czcionkami: za pomocą suwaków i przycisków pull-down. W suwakach możesz zobaczyć różne rodzaje wzorów wzdłuż pewnej osi. Na przykład możesz zacząć od Regular, a następnie przejść do Italic. Alternatywnie, możesz użyć osi Slant i przejść od Roman do Italic.
Czcionki zmienne są również dostępne jako pliki ttf, które są świetne do zastosowań w druku. Ale ponieważ pliki ttf są większe niż typowy plik czcionki zmiennej, nie są idealne dla sieci.
Jak każdy inny krój pisma, zmienne czcionki podlegają substytucji glifów. Producent czcionki musi zapewnić, że kształty glifów interpolują się prawidłowo. Jednak w przypadku czcionki zmiennej można wybrać dowolne miejsce w przestrzeni projektowej, aby wykorzystać możliwości zastępowania glifów.
Jedną z dużych zalet zmiennych czcionek jest oszczędność rozmiaru. Oszczędności te mogą być różne, w zależności od liczby osi projektu i liczby czcionek wejściowych.
Mikro typografia
Tradycyjnie, typografia jest synonimem świata projektowania druku, ale sieć internetowa miała duży udział w jej ewolucji. Typografia jest krytycznym elementem projektowania interfejsu użytkownika i może decydować o atrakcyjności wizualnej strony.
Typografia jest również świetnym sposobem na nadanie tonu stronie internetowej. Jeśli jest zrobiona poprawnie, może stanowić dobry przykład dla odwiedzających i poprawić rankingi wyszukiwarek.
Jednym z najlepszych sposobów na osiągnięcie tego celu jest sprawienie, aby tekst był czytelny i przyciągał wzrok. Dobrze wyważona mieszanka stylu, rozmiaru i koloru czcionki może uczynić stronę bardziej czytelną i atrakcyjną wizualnie.
Kolory marki strony mogą być użyte do nadania tonu i ułatwienia czytania tekstu. Wykorzystanie teorii kolorów może również pomóc projektantom dokonać właściwego wyboru kolorów.
Najlepszym sposobem na optymalizację typografii jest użycie względnych pomiarów, takich jak wysokość linii i rozmiary czcionek, tak aby wszyscy odwiedzający mieli podobne doświadczenia. Pomoże to zapewnić szybkie ładowanie strony. Ponadto, odpowiedni krój pisma może sprawić, że witryna będzie miała swój branding i przekaz.
Najlepsze czcionki są również najbardziej czytelne. Upewnij się, że używasz czcionki podstawowej, która ma co najmniej 16 pikseli wysokości i jest spójna w liniach tekstu. Eksperymentuj również z innymi stylami czcionek, aby zobaczyć, czy możesz znaleźć lepsze dopasowanie.
Na przykład, używanie czcionki bezszeryfowej było kiedyś zalecane do projektowania stron internetowych. Ale, sans serif są teraz używane coraz mniej. W rzeczywistości, w niektórych przypadkach mogą być przeszkodą. A rozpikselowane czcionki nie są łatwe do odczytania na urządzeniach o niskiej rozdzielczości. Jest to jeden z wielu powodów, dla których używanie czcionki serif nie zawsze jest dobrym pomysłem.
Tekst wyśrodkowany
Wybór odpowiedniego wyrównania tekstu dla Twojej strony może ułatwić odwiedzającym czytanie Twojego tekstu. Najczęstszym typem wyrównania tekstu jest wyśrodkowanie, ale istnieją również alternatywy dla wyśrodkowania tekstu.
Wyśrodkowany tekst jest wyrównany wzdłuż osi kolumny na środku strony, ale bez jednolitego lewego marginesu. Lewa krawędź jest zazwyczaj „poszarpana”, co zmniejsza szybkość czytania i utrudnia śledzenie drogi między wierszami. Tekst wyśrodkowany jest często używany w nagłówkach, tytułach i danych w tabelach.
Tekst wyśrodkowany jest najczęściej używany w tytułach, ale jest również dopuszczalny w przypadku innych tekstów. Nie należy go jednak stosować w dłuższych akapitach tekstu. Tekst wyśrodkowany jest również trudniejszy do odczytania niż tekst wyrównany do lewej strony.
Wyśrodkowany tekst wymaga również od użytkowników wykonywania ruchów oczu w celu znalezienia początku każdej linii. Może to powodować zmęczenie oczu czytelnika i utrudniać przetwarzanie tekstu. W połączeniu z innymi elementami strony, tekst wyśrodkowany może być również trudny do odczytania. Zaleca się również stosowanie tekstu wyrównanego do lewej strony w nagłówkach.
Tekst wyrównany do lewej strony jest również łatwiejszy do odczytania na urządzeniach mobilnych. Większość ludzi czyta od lewej do prawej, dlatego w Internecie preferowany jest tekst wyrównany do lewej. Ponadto, pomaga uniknąć niepotrzebnych skoków wzroku. Ten typ tekstu najlepiej nadaje się do podstawowych tytułów stron i krótkich akapitów tekstu.
Podczas gdy tekst wyśrodkowany może być pomocnym sposobem na wyśrodkowanie fragmentu tekstu na Twojej stronie, ważne jest, aby pamiętać, że początki linii w akapicie powinny być spójne. Dłuższe linie tekstu powinny być wcięte.
Kontrast
W ciągu ostatniej dekady typografia internetowa znacznie się zmieniła. Dziś istnieją niemal nieograniczone rodzaje liternictwa. Oznacza to, że musisz dokładnie poznać zasady typografii, aby mieć pewność, że Twoja strona będzie czytelna zarówno dla użytkowników, jak i wyszukiwarek.
Podczas gdy Internet przyniósł wiele nowych funkcji, wiele z nich odeszło od podstawowych zasad typografii. Może to prowadzić do zagubienia wiadomości i uwagi użytkowników. Na szczęście istnieje kilka zasad kciuka, które mogą pomóc Ci określić, która technika typograficzna sprawi, że Twoja strona będzie wyróżniać się na tle innych.
Pierwszą z nich jest stosowanie względnych miar. Możesz zbudować skalę typograficzną, dokonując pomiarów od lewej i prawej krawędzi swojego tekstu. Te pomiary mogą być następnie użyte do zbudowania hierarchii czcionek.
Innym ważnym punktem do zapamiętania jest wpływ rozmiaru czcionki na czytelność. Im więcej miejsca dasz swojemu tekstowi, tym łatwiej będzie go przeczytać. Może to być szczególnie ważne, jeśli używasz większej czcionki. Jednak mniejsze czcionki również mogą skorzystać z większej ilości miejsca. Możesz również wykorzystać lżejsze czcionki, zwiększając liczbę znaków w tekście.
Drugim rodzajem kontrastu jest użycie koloru. Oko ludzkie jest bardzo podatne na różnice w jasności w obrębie tekstu. Dobrym sposobem na osiągnięcie tego efektu jest użycie atramentów matowych lub błyszczących. Należy jednak pamiętać, że różni użytkownicy mają różne ustawienia jasności.
Najważniejszą kwestią, o której należy pamiętać, jest powiązanie hierarchii wizualnej i hierarchii CSS. Dzięki temu Twoje treści będą łatwiejsze do skanowania i czytania.