Czy ten typ sprawia, że mój wygląd wygląda na gruby?
Nic nie może zepsuć projektu jak typografia, która nie pasuje. Niezależnie od tego, czy jest to zbyt duży (lub zbyt mały), niewłaściwe skalowanie jest poważnym problemem.
To problem dla większej liczby projektów, niż mogłoby się wydawać. Zbyt często odwiedzasz stronę internetową, na której typ jest pięknie wyświetlany w przeglądarce na komputerze, tylko po to, by wrócić do niej później z telefonu i trudno jest ją odczytać. To się zdarza cały czas.
Problem polega na tym, że typ nie był naprawdę skalowany dla każdego urządzenia. Jest to całkowicie unikalny problem, gdy weźmiesz pod uwagę skalę typograficzną dla projektów.
Czym jest Skala Typograficzna?
Wizualna skala typograficzna obejmuje rozmiary, przestrzeń i proporcje elementów typu względem innych w projekcie. Obejmuje to wszystko, od głównego stylu tekstu do nagłówków, podtytułów, podpisów i innych elementów tekstowych.
Skala pomaga określić rozmiar i rozmieszczenie elementów tekstowych w relacji do siebie. W przypadku projektowania stron internetowych w szczególności wizualna skala typów często odpowiada znacznikom w twoim CSS (takim jak h1, h2, h3, p itd.).
Skala typu pomaga tworzyć harmonię i rytm w projekcie. To także zapobiega problemom stylistycznym, ponieważ elementy tekstowe odpowiadają elementom CSS, więc każda część projektu wykorzystuje te same elementy i spójność.
Skala powinna być oparta na rozmiarze tekstu głównego. (Zawsze najpierw ustaw krój i rozmiar czcionki). Następnie zbuduj skalę wokół tej głównej typografii. Nie wiesz od czego zacząć? Google ma solidne zalecenie :
- Użyj podstawowego rozmiaru czcionki 16 pikseli CSS. Dostosuj rozmiar w oparciu o właściwości używanej czcionki.
- Użyj rozmiarów w stosunku do rozmiaru bazowego, aby zdefiniować skalę typograficzną.
- Tekst wymaga pionowej przestrzeni między znakami; ogólną rekomendacją jest użycie domyślnej wysokości wiersza przeglądarki 1.2 em.
- Ogranicz liczbę używanych czcionek i skalę typograficzną.
Stwórz harmonię i rytm
Skala typu nie tylko pomaga użytkownikom poruszać się po kopii, ale także tworzy harmonię i rytm przepływu tekstu. Jest to ważne na każdym urządzeniu.
Więc gdzie zaczynasz?
UX Matters ma jedne z najlepszych dostępnych badań na minimum rozmiary tekstu według urządzenia . Zwróć uwagę, że są to minimalne rozmiary, a ponieważ rozmiary tekstu w tekście nadal rosną (podobnie jak odstępy między wierszami), powinieneś wziąć pod uwagę większe rozmiary punktów. Steven Hoober zaleca rozpoczęcie co najmniej 40 procent większych niż zalecane minimum. Co więcej, ulepszone style zawartości mogą wzrosnąć nawet o 80 procent powyżej minimum, ale powinieneś zachować ostrożność także w przypadku wyjątkowo dużego typu.
| Rodzaj urządzenia | Minimalny rozmiar | 40% Zalecenie (dostosowane do łatwego użytkowania) | 80% maksimum (dostosowane do łatwego użytkowania) |
| Mały telefon | 4 | 5,6 (6) | 7.2 (7.5) |
| Duży telefon | 6 | 8,4 (8,5) | 10,8 (11) |
| Phablet | 7 | 9,8 (10) | 12,6 (13) |
| Tablet | 8 | 11,2 (11,5) | 14,4 (14,5) |
| Laptop / Desktop | 10 | 14 (14) | 18 (18) |
Po ustawieniu rozmiaru tekstu, możesz określić rozmiar elementów tekstowych. Jest w tym dobra sztuka, a badanie wzroku często jest dobrym miejscem do rozpoczęcia.
Nie ma prawie czegoś takiego jak nagłówek, który jest zbyt duży. Powiedz, co musisz powiedzieć i rozmiar, aby skalować słowa w przestrzeni. Dwuliniowy nagłówek będzie większy niż jednoliniowy, nawet jeśli tekst ma dokładnie taki sam rozmiar.
Najprostszym sposobem myślenia o skalowaniu nagłówków i innych większych elementów testowych jest praca w procentach w oparciu o tekst główny. Chociaż każdy projektant ma inny punkt wyjścia, 250 procent większy niż tekst na ciele jest dobrym punktem wyjścia do nagłośnienia; 150 procent dla h2, 75 procent dla h3 i 50 procent dla elementów takich jak cytaty blokowe. (To nie jest reguła, tylko punkt wyjścia.)
Oto, dlaczego ważne są procenty, a nie ustawione rozmiary: Po ustawieniu rozmiaru ciała, procenty dostosowują odpowiednio rozmiary, bez względu na rozmiar ekranu. Każdy element typu jest związany z typem ciała.
Wytyczne dotyczące znaków i odstępów
Istnieją również inne wskazówki, które projektanci również powinni sprawdzić, jeśli chodzi o typ na ekranie. Jeśli chodzi o odstępy, jedną z zasad było spojrzenie na znaki w linii, aby zapewnić czytelność.
- Komputery i duże urządzenia: od 60 do 75 znaków w linii
- Telefony i małe urządzenia: od 35 do 40 znaków na linię
Należy zauważyć, że czytelność na mniejszych ekranach opiera się na mniejszej liczbie znaków (większy tekst).
Ta sama zasada dotyczy również odstępów. Potrzebujesz więcej miejsca między wierszami tekstu, gdy rozmiar ekranu jest ograniczony, aby ułatwić użytkownikom czytanie i skanowanie zawartości. Rozważ dodanie 25% więcej odstępów między wierszami na mniejszych urządzeniach niż w przypadku typografii pulpitu.
Dodatkowy rozmiar i odstępy ułatwiają ciasne lub skrzypiące wrażenie, które użytkownicy odczuwają, próbując czytać na mniejszych urządzeniach. Ponieważ płótno jest małe, przepływ czytelnika i czytelność są niezbędne, aby użytkownicy mogli przewijać.
Wskazówki, jak zacząć
Istnieje wiele sposobów na stworzenie skali typograficznej i sprawdzenie, czy tekst nie sprawia, że twój wygląd wygląda na gruby. Sposób, w jaki to robisz, jest prawdopodobnie zależny od poziomu komfortu użytkownika, wraz z kodem i rozwojem w uzupełnieniu do projektu.
Najlepszym rozwiązaniem jest użycie responsywnego projektu z zapytaniami o media. Jest to opcja projektanta-programisty, która zapewni najwyższy poziom kontroli nad specyfikacjami tekstowymi. (Aby uzyskać więcej informacji, skorzystaj z powyższych zaleceń Google).
Inną opcją jest zaprojektowanie różnych wersji. Mimo że jest to dość nieaktualna koncepcja, nadal niektóre miejsca używają mobilnych adresów URL i adresów URL na komputery na swoich stronach. W większości przypadków nie jest to zalecane, ale w przypadku niektórych witryn, na których projekt jest znacznie inny lub użytkownicy doświadczają różnych rzeczy, może to być opcja.
Prostą opcją jest zacznij od motywu na swojej stronie internetowej. Tylko pamiętaj, aby wybrać w pełni responsywną opcję. Kiedy używasz responsywnego motywu wysokiej jakości, większość zgadywania jest dla ciebie za darmo. Wszystko, o czym naprawdę musisz pomyśleć, to rozmiar tekstu w ciele. Po prostu sprawdź wszystko, aby upewnić się, że rozmiary urządzeń mobilnych spełniają Twoje standardy.
3 narzędzia do tworzenia skali typów
Istnieje wiele dostępnych narzędzi, które pomogą Ci zobaczyć dokładny wpływ wizualnej skali typografii. Oto kilka najlepszych i najbardziej przyjaznych dla użytkownika opcji.
- Wpisz skalę : Wprowadź tekst i graj z opcjami takimi jak rozmiar, skala i czcionka bezpośrednio na ekranie; stopniuj kod CSS lub edytuj kod bezpośrednio z narzędzia;
- Skala modułowa : Skala działa jak reguła, aby pomóc określić rozmiary dla danego typu; następnie pobierz wyniki jako wtyczkę Sass lub JS lub zobacz je na ekranie;
- Kalkulator typografii Golden Ratio : Narzędzie optymalizuje rozmiar, wysokość linii, szerokość i znaki w linii przy użyciu złotego podziału
Wniosek
Odpowiednia skala typograficzna sprawi, że Twój projekt będzie wyglądał estetycznie i smuklej. Jest to dodatkowa harmonia, której użytkownicy mogą nie rozumieć, ale przyczynia się do ogólnej czytelności i użyteczności.
Jest prawdopodobne, że skala jest wyłączona, jeśli projekt "po prostu nie wygląda prawidłowo." Nieprawidłowy rozmiar może być trudny do wskazania, ale często jest miejscem do patrzenia, gdy coś w projekcie jest niewyważone. Zagraj z kilkoma różnymi opcjami skali, zanim zaczniesz się nad czymś zastanawiać, i pamiętaj, że trend jest teraz dla typu, który jest nieco większy niż w przeszłości.