9 porad dla lepszej hierarchii typograficznej
Każdy projekt wymaga systemu i hierarchii elementów tekstowych. Pomyśl tylko o wszystkich małych fragmentach tekstu, które są używane w całym projekcie - nagłówki, kopia ciała, elementy nawigacji, informacje prawne, podpisy i tak dalej.
Ale jak stworzyć tę hierarchię, aby każdy element tekstowy płynnie przechodził do następnego? Dzisiaj przeprowadzimy Cię krok po kroku przez proces budowania systemu hierarchii typografii, który można wykorzystać do prawie każdego projektu. (Łączymy wskazówki z pięknymi przykładami świetnej typografii, aby pomóc Ci zebrać trochę inspiracji.)
Poznaj elementy Envato
1. Zacznij od wygodnego kopiowania treści
Chociaż możesz zacząć od fajnego nagłówka, miejsce rozpoczęcia jest tak naprawdę na środku. Najpierw określ wygodny krój pisma, rozmiar i odstępy dla głównej kopii.
Powinno to mieć sens, ponieważ jest to większość tekstu w projekcie. Niezależnie od tego, czy budujesz stronę internetową, czy broszurę, ta koncepcja jest taka sama. Według Baymard Institute idealna czytelność kopii ciała wynosi od 50 do 60 znaków w wierszu (lub kolumnie). Ta wytyczna pomoże ci ustawić skalę tekstu, która jest czytelna i uwzględnia różne rodzaje krojów pisma (np. Zwykłe kontra skondensowane kontra płyty).
2. Zbuduj skalę
Kiedy już wiesz, jak będzie wyglądać kopia ciała, możesz ustawić skalę wokół niego dla wszystkich innych elementów tekstu w projekcie. Niektóre bloki tekstu mogą być łatwo przeoczone; sporządzić listę każdego użycia tekstu w swoim projekcie.
- Kopia ciała
- Nagłówki
- Podpozycje
- Podpisy
- Cytaty blokowe
- Elementy nawigacyjne
- Informacje o stopce
- Legalna kopia lub zrzeczenie się odpowiedzialności
Teraz utwórz skalę określającą krój pisma, zakres rozmiarów i użycie dla każdego z tych elementów. (I wbuduj go w CSS dla stron internetowych lub plików stylów dla dokumentów roboczych.) Istnieje wiele sposobów tworzenia skali, ale procent wielkości może być dobrym punktem wyjścia. Możesz także ustalić skalę na podstawie matematyki za siatką linii bazowej lub wizualnie.
Oto prosta skala na początek:
- Rozmiar kopii ciała
- Nagłówki są kopiami treści razy 220%
- Podpozycje są wielkościami kopii razy 150%
- Elementy nawigacyjne mają rozmiar kopii ciała razy 80%
- Stopka / legalna kopia ma wielkość ciała razy 80%
3. Myśl od największej do najmniejszej, od góry do dołu
Ta zasada jest dość prosta: największy i najważniejszy tekst powinien znajdować się na górze, a rozmiary powinny się zmniejszać podczas czytania strony lub ekranu.
Nie oznacza to, że nie można złamać tej zasady od czasu do czasu z pewną finezją projektowania, ale zawsze powinna ona być punktem wyjścia do opracowania hierarchii typograficznej. (Kto tak naprawdę przewinie do końca strony nagłówek, a następnie wróci na górę, aby rozpocząć czytanie?)
4. Ustal reguły kosmiczne
Równie ważna jak wielkość liter jest przestrzeń między nimi i wokół niej. Czynniki określające przestrzeń obejmują wiodące (lub wysokość linii), wcięcia (lub nie), zawinięcia i rynny oraz wyrównanie.
Rozważ proporcje odstępów odzwierciedlające skalę używaną do zmiany rozmiaru tekstu. Również rozmiar płótna jest tutaj bardzo ważny. Większe płótna są czytelne przy mniejszych odstępach niż małe płótna. (Dlatego wiele projektów ma znacznie luźniejsze specyfikacje odstępów dla urządzeń takich jak telefony komórkowe i bardziej rygorystyczne zasady dla komputerów stacjonarnych.)
Podobnie jak w przypadku rozmiarów kroju pisma, reguły odstępów powinny być wcześniej ustalone dla całej struktury projektu. Spójne, czyste odstępy to jedna z małych rzeczy, które mogą stworzyć lub złamać projekt.
5. Ustaw zasady dla pogrubienia i kursywy
Podczas gdy pogrubienie i kursywa nie są różnymi elementami lub rozmiarami, użycie jest ważne. (Po prostu wyobraź sobie, jak będzie wyglądał projekt, jeśli każde inne słowo będzie pogrubione.)
To sprawia, że wytyczne dla pogrubienia i kursywy są szczególnie ważne. Zamiast patrzeć na rozmiar lub przestrzeń, uwaga jest znacznie bardziej kontekstowa. Specyfikacje użycia mogą określać, że tylko tak wiele słów lub wyrażeń (lub konkretnych słów lub wyrażeń) może być poddanych temu zabiegowi. Nadmiernym pogrubieniem i kursywą jest powszechny błąd; w razie wątpliwości nie używaj go.
6. Utwórz „Z”
Typowy wzorzec czytania ma kształt litery Z. Niezależnie od tego, czy projektujesz język, który czyta od lewej do prawej lub od prawej do lewej (odwróć Z), użytkownicy będą czytać od jednego rogu wzdłuż linii do końca, a następnie z powrotem do początkowy róg i linię wzdłuż powtarzającego się wzoru.
Użyj tego naturalnego przepływu podczas umieszczania elementów tekstowych na ekranie. Ten kształt litery Z sprawia, że większość marek umieszcza swoje logo w lewym górnym rogu. Jest to pierwsze miejsce, w którym oko ląduje podczas czytania.
7. Rozważ wagę wizualną
Rozmiar nie jest jedynym czynnikiem decydującym o tym, jak duży element tekstowy wygląda na ekranie. Waga wizualna jest równie ważna i może wpływać na sposób tworzenia skali typograficznej.
Kroje będą wyglądać na większe, gdy:
- Obejmują one grube obrysy
- Obejmują one zawijasy lub ozdoby
- Są szerokie
- Są to podstawowe kroje pisma
- Mają wyższe x-wysokości
- Są używane jako wszystkie czapki
Kroje czcionek będą wyglądały na mniejsze, gdy:
- Są skondensowane
- Obejmują one lekkie lub cienkie szerokości skoku
- Kontrast z tłem jest niewielki
- Są używane z małymi literami
8. Utwórz akcenty
Są pewne słowa, które chcesz podkreślić, które nieco wykraczają poza normalną skalę typograficzną. Dodanie akcentu do litery może wyróżnić ją bez konieczności dostosowywania rzeczywistego rozmiaru lub kroju pisma.
Typowe akcenty obejmują:
- Kolor
- Podkreślać
- Atrakcja
- Tekst w przycisku lub kształcie
- Prosta animacja
- Zmień skrzynkę na inny typ tego samego rozmiaru
Zaletą każdego akcentu w hierarchii typów jest to, że natychmiast przyciąga uwagę. Te elementy powinny być wykorzystywane oszczędnie, aby uzyskać jak największy wpływ i kluczowe elementy w projekcie.
9. Użyj „testu wzroku”
Wreszcie każda reguła ma wyjątek (lub dwa). W tym momencie pojawia się „badanie wzroku”. Wystarczy spojrzeć na skalę na ekranie. Jak wygląda dla Ciebie tekst? Czy istnieje logiczny przepływ? Jest łatwy do odczytania?
Jeśli czujesz się w jakikolwiek sposób, rozważ dostosowanie wagi. W zależności od używanego kroju pisma i innych elementów w projekcie - od zdjęć po kolory i kontrast - skala będzie wymagać regulacji z Twojej strony. To tylko punkt wyjścia, gdy nie jesteś pewien, co chcesz zrobić.
I poproś także o inne oczy. Utwórz jedną lub dwie wersje z różnymi hierarchiami, aby zobaczyć, która wersja uzyska najlepszą odpowiedź. Design jest sztuką wizualną, dzięki czemu „badanie wzroku” jest nieprecyzyjną, ale dość niezawodną opcją.
Wniosek
Po ustawieniu hierarchii typograficznej dla projektu najlepszą rzeczą, jaką możesz zrobić, to udokumentować ją. Ustal skalę za pomocą CSS dla stron internetowych lub utwórz pliki stylów podczas pracy nad drukowanymi projektami.
W przypadku projektów na większą skalę lub brandingu, umieść skalę i specyfikacje na piśmie w przewodniku po stylu. Tworzenie hierarchii typów wymaga trochę pracy na zapleczu, ale sprawia, że ukończenie projektu jest szybsze, łatwiejsze i nie wspominając o bardziej spójnym, w miarę przechodzenia do kolejnych projektów.
