Prosty przewodnik po typografii responsywnej
Zdecydowana większość artykułów dotyczących responsywnego projektowania koncentruje się na dwóch głównych obszarach: płynnej, elastycznej siatce i płynnych, elastycznych obrazach. To, o czym wielu nie mówi, to typografia.
A jednak dla większości stron internetowych najważniejszym elementem jest tekst, treść .
Zgoda, w przypadku witryn, w których obrazy lub wideo stanowią treść podstawową, typ responsywny jest nieco mniej ważny, ale nadal nie należy go przeoczyć.
Dobra wiadomość jest taka, że typografia responsywna nie jest szczególnie trudna do osiągnięcia. Musimy tylko poświęcić trochę czasu na zastanowienie się, w jaki sposób nasz typ powinien reagować na zmiany w rozmiarze ekranu, a następnie wprowadzić te zmiany.
Zasady reagowania typu
Istnieją dwie główne zasady tworzenia skutecznej responsywnej typografii. Pierwszy to typ skalowalny. Oznacza to, że nie tylko zmienia rozmiar na podstawie rozmiaru ekranu, ale także zmienia rozmiar przez użytkownika.
Drugi to zoptymalizowane długości linii, które zapewniają czytelność. Oznacza to, że w przypadku niektórych ekranów utrzymywanie mniejszego obszaru zawartości i krótszych długości linii ma większy sens, mimo że zawartość teoretycznie może się rozciągać.
Zmiana rozmiaru typu przy użyciu rems
Większość projektantów używa pikselów lub ems do zmiany rozmiaru. Ems są lepszą opcją, ponieważ umożliwiają użytkownikom zmianę rozmiaru tekstu w przeglądarce. Ale ems są względne w stosunku do elementu nadrzędnego, co oznacza, że są bardziej skomplikowane w użyciu niż piksele, które są złożone tylko w responsywnych projektach, w których jest więcej rozmiarów i relacji, które można śledzić.
Rems oferują lepszą alternatywę dla ems. Działają w niemal identyczny sposób, z wyjątkiem jednej kluczowej różnicy: jednostki rem są względne html element, a nie poszczególne elementy nadrzędne. To sprawia, że utrzymanie odpowiedniego rozmiaru twojego typu jest o wiele prostsze.
Rem jednostki są teraz obsługiwane we wszystkich głównych nowoczesnych przeglądarkach, w tym Opera z wersji 11.6 i IE9. Chociaż możesz chcieć uwzględnić awarie we wcześniejszych przeglądarkach, jest wystarczająco dużo wsparcia dla remsów, aby teraz z nich korzystać.
Ponieważ będziesz używać rem jednostek do rozmiaru, upewnij się, że zastosowałeś reset do swojego html element a nie twój body element. Powinno to wyglądać tak:
html { font-size:100%; }
Teraz twoje rem jednostki zostaną zastosowane do domyślnego rozmiaru czcionki dla urządzenia.
Następnie musisz określić rozmiar czcionki dla każdego rozmiaru ekranu. Polecam eksperymentowanie z rzeczywistymi rozmiarami czcionek na różnych urządzeniach, aby zobaczyć, co wygląda najlepiej. W dużej mierze zależy to od krojów, które wybrałeś, a także od ogólnego projektu.
Prawdopodobnie będziesz chciał określić wiele rozmiarów czcionek na podstawie różnych rozmiarów ekranu, co jest całkiem proste. Na przykład Twój CSS może wyglądać mniej więcej tak:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
To prawda, jest to uproszczony kod dla tego artykułu, ale daje ci punkt wyjścia. Możesz zauważyć, że dla najmniejszych ekranów określony jest nieco większy rozmiar czcionki. Wynika to z faktu, że większe rozmiary czcionek są zazwyczaj łatwiejsze do odczytania na małych ekranach.
Oczywiście, będziesz potrzebować dodatkowych specyfikacji dla rzeczy takich jak twój h1 elementy i takie. Gorąco polecam używanie narzędzia takiego jak Web Font Pattern aby zobaczyć, jak wygląda twój typ.
Utrzymywanie optymalnych długości linii
Chociaż typ skalowalny jest dość prostą koncepcją, utrzymywanie prawidłowych długości linii na wielu urządzeniach staje się nieco trudniejsze. Trochę debatowano, jaka jest optymalna długość linii dla czytelności, ale według Instytut Baymard wydaje się, że konsensus wynosi od 50 do 75 znaków na linię.
Zalecają również użycie kontenera o stałej szerokości dla treści, ale to nie jest zgodne z celem elastycznego projektu, więc musimy zbliżyć się do rzeczy nieco inaczej, jeśli chcemy zachować szybkość reakcji i zoptymalizować długości linii.
Najpierw spójrz na różne rozmiary ekranów, na których będziesz projektować i dowiedz się, jakiego rozmiaru czcionki powinieneś użyć, aby uzyskać około 50 znaków na linii. W przypadku bardzo małych ekranów, aby zachować czytelny rozmiar czcionki, konieczne może być zejście poniżej 50 znaków na linię, ale 50 powinno być celem. Daje nam to dobry punkt wyjścia dla naszego rozmiaru czcionki.
Powinniśmy również ustawić maksymalne szerokości (lub punkty przerwania) dla obszarów treści tekstowych. Sprawdź rozmiar typu używanego dla danego rozmiaru ekranu, a następnie określ szerokość kontenera treści, gdy masz około 75 znaków w linii. To nie będzie dokładne, chyba że używasz czcionek o stałej szerokości, ale powinieneś być w stanie wymyślić średnią dość łatwo. To staje się naszą maksymalną szerokością kontenera.
Powiedzmy, że domyślny rozmiar czcionki dla danego urządzenia to 16 pikseli, a rozmiar czcionki ma wynosić 20 pikseli (powiedzmy, że dla tego przykładu używamy czcionek szeryfowych takich jak Droid Serif). Oznacza to, że określisz typ na 1,25rem. Przy tej wielkości potrzebujesz szerokości pojemnika o szerokości około 675 pikseli. Daje nam to średnią liczbę znaków w latach 60., która jest zgodna z naszą docelową szerokością.
Aby określić szerokość kontenera, po prostu użyj tego kodu:
@media (min-width: 950px) { .container {width:675px;} }
Możesz ustawić maksymalne szerokości linii dla każdego rozmiaru wyświetlania lub tylko dla określonych. W przypadku mniejszych ekranów możesz zostawić szerokość kontenera i pozwolić, aby typ rozłożył się na całej szerokości ekranu.
Teraz, przy znacznie większych ekranach, możesz spojrzeć na dzielenie zawartości na wiele kolumn. Załóżmy na przykład, że pracujesz z iPadem w widoku poziomym. Szerokość twojego ekranu wynosi 2048 pikseli. Rozciąganie linii w celu wypełnienia ekranu utrudnia czytanie, ale centrowanie treści i utrzymywanie długości linii w krótszym czasie uniemożliwia oglądanie treści w trybie poziomym.
Zamiast tego ustaw typ w dwóch kolumnach (lub nawet trzech, w zależności od rozmiaru czcionki). Specyfikacja wielu kolumn CSS3 ułatwia podzielenie tekstu na wiele kolumn bez konieczności zmiany całego układu. Połącz to z zapytaniami o media, a teraz masz układ treści, który dzieli się na dwie lub trzy kolumny dla większych ekranów, zachowując jednocześnie bardzo czytelny typ i bardzo czytelną długość linii.
Ponownie, kod do tego jest całkiem prosty:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Teraz, na ekranach o szerokości przekraczającej 1140 pikseli, treść zostanie podzielona na dwie kolumny, dzięki czemu linie będą bardziej czytelne.
Używanie alternatywnych krojów pisma
Jedną z rzeczy, które często pomija się, gdy mówimy o responsywnej typografii, jest przekonanie, że różne kroje pisma mogą nie działać dobrze w różnych rozmiarach. Dotyczy to szczególnie czcionek ekranowych.
Czy to oznacza, że powinieneś unikać używania tych czcionek w swoich responsywnych projektach? Oczywiście nie. Zamiast tego po prostu określ różne czcionki dla różnych elementów w większych lub mniejszych układach.
Na przykład przy projektowaniu na komputery stacjonarne możesz chcieć użyć czcionki podobnej do Skrypt League dla twoich nagłówków. Ale na mniejszym wyświetlaczu, takim jak iPhone, musisz albo uczynić go tak dużym, że będzie dominował w treści, albo będzie bardzo trudny do odczytania.
Możemy tu użyć League Script dla większych wyświetlaczy (iPad, pulpit itp.), Jednocześnie przełączając się na większą wersję czcionki ciała dla mniejszych wyświetlaczy (takich jak iPhone lub inne smartfony).
Aby to zrobić, wystarczy podać coś takiego:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Oczywiście można to zrobić również dla więcej niż tylko twoich nagłówków.
Wniosek
Podczas gdy responsywny projekt w dużej mierze skupiał się na obrazach i ogólnym układzie, typografia jest tak samo ważna jak obie te rzeczy. Najlepsze jest to, że nie jest szczególnie trudno dostosować i zoptymalizować typografię, aby uzyskać responsywny projekt.
Ważne jest, aby wkładać w to ten sam czas i wysiłek, który wkładasz w inne elementy swojego projektu. Zachowanie czytelności treści tekstowej jest istotnym elementem zapewniającym optymalną wygodę użytkownikom.
Czy kładziecie duży nacisk na responsywną typografię w swoich projektach, tak jak w przypadku elastycznych siatek i obrazów? Dlaczego lub dlaczego nie?