Zasady responsywnej typografii internetowej

Responsive Web Typografia jest trudna - musisz mieć zarówno motywy projektowe, jak i know-how techniczne. Ale jednak trudne może być, że to jest, nie jest opcją, ponieważ typografia jest kamieniem węgielnym projektowania stron internetowych.

Jak uzyskać zarówno projekt i kod? Jak twoi deweloperzy komunikują się z projektantami pchania pikseli? Jak twoi projektanci mogą dbać o twórców nonszalantów o typografii? Najszybszym i najprostszym sposobem jest zdobycie projektantów i programistów, aby mówić tym samym językiem, szanować się nawzajem dla ich rzemiosła i starają się zrozumieć zarówno zasady, jak i ograniczenia typografii internetowej.

W tym artykule ma na celu zapewnienie zarówno projektantów, jak i deweloperów z fundacją, z której należy rozpocząć komunikat na temat typografii. Obejmujemy niezbędne zasady projektowania i zbadamy praktyczne rozwiązania Responsywna typografia .

Co to jest dobra typografia?

"Dobry" jest zawsze subiektywny; Nie jest to stała kotwica, na której możemy zawiasować komunikacji. Dla projektantów i programistów do skutecznego komunikowania się, musimy rozpocząć się od rozmowy o wspólnym mianowniku, które obie strony mogą zrozumieć. Ten mianownik jest celem typografii.

Typografia jest wyglądem tekstu; Wytłudzamy tekst. Celem opatrunku jest uczynienie użytkowania wystarczająco dużo, aby przyciągnąć rozmowę, ale nie trzyma tak wiele uwagi, że druga strona staje się rozproszona od rozmowy.

Podobnie celem typografii jest umożliwienie czytelnikom skupić się i zanurzyć w treści tekstu. Dobra typografia z definicji jest typografią, która pomaga tekstowi wypełnić swój cel komunikacji.

Dwa rzeczy muszą się stać dla czytelników, aby skupić się i zanurzyć w tekście. Po pierwsze, typografia musi przekazać odpowiednie (jeśli jakiekolwiek) emocje. Po drugie, tekst musi być łatwy do odczytania. To przynosi nas do czterech istotnych właściwości, które musisz mieć rację.

• Rodzina czcionek
• Rozmiar czcionki
• Wysokość linii (zwana także prowadzeniem)
• Szerokość tekstu (zwana także miarą tekstu)

Uzyskiwanie właściwej rodziny czcionek pomaga podlegać podstawowym emocjom tekstu. Uzyskiwanie pozostałych trzech nieruchomości w prawo zapewnia, że ​​Twój tekst jest łatwy do odczytania. W większości projektanci są doskonali w znalezieniu właściwej rodziny czcionek. Więc do końca tego artykułu skupimy się na pozostałych trzech czynnikach.

Sztuka czytelnego tekstu

Pierwszym krokiem w każdym projekcie jest ustawienie rozmiar czcionki , Wysokość linii i szerokość twojego tekstu ciała. Ten proces nazywa się składami. Zacznij od składu ze stroną zawierającą informacje potrzebne użytkownika. Jak najwięcej, ta strona powinna zawierać wiele elementów, takich jak H1, H2, H3, tekst ciała i podpisy, dla których należy dokonać świadomego wyboru co do tego, co działa dla Twojego projektu. Im więcej elementów zawiera Twoją stronę, tym lepsze są twoje szanse na ustawianie schematu typu, który działa na całej płycie.

Po wybraniu rozmiar czcionki , Wysokość linii I pomiar na tekst ciała, upewnij się, że używasz prawdziwej treści. Jeśli nie masz rzeczywistych treści, użyj tekstu z Wikipedii zamiast Lorem Ipsum.

Musisz także umieścić w tej samej sytuacji, dla której masz nacenę, ponieważ odległość między oczami czytelnika a ekranem jest inny dla różnych urządzeń. Jeśli masz na maszynę do urządzenia mobilnego, spójrz na wyjście przez telefon. Jeśli masz zasięg na laptopie, usiądź przy biurku z laptopem i tak dalej.

Po usiedleniu się we właściwym środowisku rozpocznij proces składu, najpierw wybierając rozmiar czcionki , a następnie środek i wreszcie Wysokość linii . Pamiętaj, że nie ma idealnej kombinacji - po prostu spójrz na inne strony, które czujesz, masz dobrą typografię, a zobaczysz, że żaden z nich nie używa tego samego rozmiar czcionki , Wysokość linii i miar. To, co dążyłeś, to po prostu tekst, który jest łatwy do odczytania.

Ustawianie odpowiednich rozmiarów jest trudniejsze do wyjaśnienia na piśmie, więc zrobiłem kilka filmów, które pomogą Ci rozmiar czcionki , pomiar i prowadzący .

Oto kilka szybkich wytycznych, które pomogą Ci zapewnić dobrą wielkość czcionki, prowadzącą i miarę.

Twoja czcionka jest zbyt mała, jeśli:

• Musisz skoncentrować się, aby przeczytać tekst
• Musisz zezować swoje oczy
• Masz ochotę powiększyć

Twoja czcionka jest zbyt duża, jeśli:

• Zaczynasz zauważyć litery, zamiast czytać treść
• Możesz przeczytać tylko jeden na trzy słowa na raz
• Masz pragnienie pomniejszania

Twój środek tekstowy jest zbyt długi, jeśli:

• Musisz zamienić głowę, aby przeczytać tekst
• Tracisz koncentrację w połowie

Twój środek tekstowy jest zbyt krótki, jeśli:

• Czujesz się podrażniony, gdy tekst przełamuje do następnej linii
• Twoje oczy są zmęczone od nasięga się w lewo i szybko

Twoje prowadzenie jest zbyt wąskie, jeśli:

• Tekst czuje się gęsty i przytłaczający
• Czytasz niewłaściwą linię tekstu

Twoje prowadzenie jest zbyt duże, jeśli:

• Jesteś rozproszony przez białą przestrzeń między rzędami słów

Zawsze pamiętaj o definicji dobrej typografii: nie jesteś po doskonałości, po prostu strzelasz do tekstu, który jest łatwy do odczytania. Robiąc to, będziesz chciał przetestować wybrane wybory z publicznością (przyjaciele i współpracownicy też robią świetnych testerów), aby upewnić się, że masz rację. Przejdź tylko do ustawiania rozmiarów innych elementów po zakończeniu składu tekstu.

Składanie innych elementów

Wielu projektantów i programistów wybrali rozmiar czcionki Dla elementów takich jak H1 i H2 wizualnie i po prostu mają nadzieję, że te magiczne liczby działają dobrze w ich projekcie. Ale nie ma potrzeby ciągnięcia liczb z cienkiego powietrza; Typografowie używali Wagi Typografii przez wieki, aby pomóc w tym pomóc. To, co robisz, ma wybrać numer z skali typografii jako rozmiaru elementu. Niestety, skale te nie mogą być bezpośrednio używane do sieci, ponieważ są zbudowane do projektowania drukowania.

Tim Brown, ekspert w dziedzinie typografii, wymyślił rozwiązanie zwane skalą modułową. Funkcjonuje dokładnie jak skalę typografii, z wyjątkiem konstruowania skali modułowej z tekstem ciała, na którym zdecydowałeś się.

Aby utworzyć skalę modułową, bierzesz tekst ciała rozmiar czcionki (Nazywany również wielkości czcionki podstawowej) i pomnóż go przez współczynnik licznych czasów, aż zostaniesz skalę. Często stosunek, którego używasz, pochodzi z muzyki (ponieważ muzyka ma korzenie w harmonii). Powyżej jest przykładem skali utworzonej za pomocą Kalkulator skali modułowej .

Kiedy skończysz konstruowanie skali modułowej, możesz przejść do składania pozostałych elementów, wybierając numer ze skali jako rozmiar czcionki . Następnie ustawić wiodącą i zmierzyć w tym samym procesie, aż uzyskasz dobrą równowagę czytelnych elementów.

Pionowy rytm

Następnym krokiem jest pomóc żelowi poszczególne elementy razem za pomocą techniki zwanej pionowym rytmem. Dla jednego elementu, aby przepływać harmonijnie do następnego, musimy poprawić coś, co dołącza do nich: biała przestrzeń. Ta biała przestrzeń musi być wystarczająco duża, aby odróżnić jeden element od następnego elementu, ale musi być wystarczająco mały, aby zapewnić uszkodzenie przepływu.

Ile użyjesz białej przestrzeni? Wielu projektantów wybiera liczbę jak 10px, który jest łatwy dla nich do zaprojektowania. Z drugiej strony wielu deweloperów ma tendencję do wyjęcia losowej liczby (np. 6px) albo z innego systemu sieci lub artykułu, które przeczytają online. Nic dziwnego, że te dwa nie mogą się komunikować.

Jak możesz sobie wyobrazić, nie ma potrzeby polegać na magicznej liczbie na białą przestrzeń; Możemy użyć wielu Wysokość linii wartość naszego tekstu ciała. Dzieje się tak, ponieważ instynktownie rozpoznają białe wzory przestrzeni w tekście. Im silniejszy wzór, bezpieczniejszy odczuwamy, a tym łatwiej jest pozwolić naszym umysłowi wędrować w treść.

Aby użyć pionowego rytmu, wszystko co robi, to:

1. Ustaw białą przestrzeń między elementami do wielu podstawy Wysokość linii
2. Ustaw Wysokość linii wszystkich innych elementów do wielu podstawy Wysokość linii

Wielokrotność nie musi być liczbą całkowitą. Możesz użyć wartości takich jak 0.5x i 1,25x podstawy Wysokość linii zapewnić większą elastyczność. Te wartości działają, ponieważ rytm pionowy wykorzystuje zasadę powtórzeń.

Podstawowa siatka lub nie?

Ilekroć wspominamy pionowo rytm, koncepcja podstawowej siatki nieuchronnie pojawia się na zdjęciu. Chociaż siatka liniowa może potencjalnie być pomocna, jest głównie wrakiem pociągu, ponieważ początkujący skupiają się tyle energii na tworzeniu tekstu siedzieć między (lub na) linii bazowych, które uważają, że niemożliwe jest uzyskanie pionowego rytmu.

Szczerze mówiąc, nigdy nie dostaniesz siatki wyjściowej, aby idealnie pracować w sieci, ponieważ matematyka w typografii zawsze zawiera subixele (jak 24.8px), a wszystkie przeglądarki zajmują się subpixelami inaczej. Na przykład niektóre przeglądarki powodują każdy element na stronie, aby był wyłączony przez 1px. Te 1px błędy gromadzą się i naciskają dowolne elementy umieszczone w dół na stronę nawet dalej z siatki. W rezultacie zalecam stosowanie linii bazowej.

Przejście dalej, wejdźmy do królestwa reagujących praktyk i projektowania dla wielu ekranów.

Typografia dla wielu ekranów

Projektowanie typografii dla wielu ekranów nie jest średniego wyczynu. Istnieją trzy rzeczy, które musimy zrobić z perspektywy projektu.

Po pierwsze, odległość między oczami użytkownika a ich ekranem zależy od tego, jakie urządzenie używają. Ogólnie rzecz biorąc, użytkownik umieści urządzenie dalej podczas korzystania z większego ekranu. Zjawisko to oznacza zwiększenie rozmiarów czcionek, ponieważ szerokość urządzenia wzrasta.

Po drugie, chcemy utrzymać proporcje między tekstem ciała a innymi elementami spójnymi. Oznacza to, że musimy zwiększyć rozmiary wszystkich elementów, ponieważ zwiększymy rozmiar tekstu ciała.

Po trzecie, w określonych punktach przerwania, chcemy zwiększyć rozmiar czcionki określonych elementów (takich jak H1), wybierając inny numer z skali modułowej. Dlatego pozwala nam kontrolować hierarchię wizualną i zapewnia, że ​​elementy grają na tyle uwagi, aby wyciągnąć użytkownika, aby przeczytał.

Kodowanie do responsywnej typografii

Wiemy, że musimy zwiększyć proporcjonalnie nasze rozmiary tekstu. Najprostszy sposób na to zwiększenie rozmiar czcionki w ramach html. selektor. Chcemy również używać jednostek względnych do przestrzegania użytkownika rozmiar czcionki pierwszeństwo.

 HTML {Rozmiar czcionki: 100%;}
@media (min-szerokość: 40em) {
 html {font-size: 112,5%;}
} 

Chcemy również użyć jednostki względnej dla innych elementów, więc skalują zgodnie z HTML rozmiar czcionki ( H2. w poniższym przykładzie). Jeśli chcesz zmienić rozmiar czcionki do innej liczby w skali modułowej, wszystko co robi, to zmienić rozmiar czcionki odpowiednio ( H1. poniżej).

 H1 {Rozmiar czcionki: 2.369EM;}
@media (min-szerokość: 40em) {
 html {font-size: 3.147em;}
}

H2 {Rozmiar czcionki: 1.777EM;} 

Chociaż proces wygląda prosty, nowi deweloperzy mogą stawić czoła mnóstwo bólu głowy z powodu zaangażowanego matematyki, dlatego zalecam używanie funkcji i miksów, aby pomóc. Często używam SM() z The. Modułowa biblioteka skali . Z tym możesz pisać MS (4) zamiast 3.157EM. i MS (3) zamiast 2.369EM. .

Przykład funkcji, który może złagodzić obciążenie obliczania pionowego rytmu to:

  @Function VR ($ rytm) {{@return $ rytm / 16 * 1Rem;}