Prowadzący: przestrzeń jest równie ważna jak słowa
Kluczowym elementem każdego projektu strony jest typ. Wybór czcionek, rozmiarów i kolorów może stanowić dużą część sposobu na kreślenie witryny. Równie ważne, jak same litery, są odstępy dookoła tych liter, a zwłaszcza do znaków wiodących używanych w blokach tekstu.
Im więcej używasz, tym ważniejsze staje się prowadzenie. Za czcionką i rozmiarem jest to jeden z kluczowych czynników, które należy wziąć pod uwagę, gdy patrzysz na typ czytelny.
Wiodące specyfikacje, których używasz do wyświetlania logo lub ekranu powitalnego, mogą się znacznie różnić od tych, które są używane w blogu.
Inne elementy projektu również mają wpływ na to, jak powinieneś korzystać z wiodących. Rozmiar typu, szerokość kolumn, a nawet kolor tła może pomóc Ci dokonać mądrych wyborów wiodących.
W jaki sposób korzystasz z wiodącej funkcji, w głównej mierze wchodzi w grę dla dużych bloków tekstu.
Co prowadzi?
Prowadzenie - wyraźne ledding - jest odstępem między liniami typu. Przewodnictwo tradycyjnie mierzono punktami (podobnie jak czcionki). Termin pochodzi z prasy listów w starym stylu, gdy typ został ustawiony ręcznie. Ołówkowe paski zostały umieszczone pomiędzy liniami typu, aby utrzymać wszystko w idealnym wyrównaniu.
Od czasu pojawienia się publikacji cyfrowych, prowadzenie często było mylone z linią wysokości. Wysokość linii to cała przestrzeń od jednej linii bazowej - wyimaginowanej płaszczyzny, na której litery takie jak "a", "x" i "n" siedzą - do następnej. W przeciwieństwie do tego, wiodąca jest przestrzeń od spodu litery w jednej linii, do początku litery na następnej: jest to dosłownie wysokość linii minus wysokość tekstu.
W typografii cyfrowej, zwłaszcza w typografii internetowej, terminy wiodące i wysokość linii są często używane zamiennie. W CSS na przykład nie ma wiodącej wartości, zamiast tego używamy wysokości linii.
Podczas gdy przewodzenie było niegdyś wartością fizyczną, mierzalną, jest obecnie najczęściej używane jako koncepcja: wizualne wrażenie przestrzeni między dwiema liniami.
To, jak wiodący jest używany w bloku tekstu, może wpływać na czytelność. Pomiędzy typem jest zbyt blisko siebie i jest zbyt daleko od siebie. Każda skrajność może być trudna dla oczu czytelnika. Wiodąca jest przede wszystkim zmiana gęstości typu. Kluczem jest zrozumienie, jaką wiadomość chcesz przekazać swojemu typowi i odpowiednie dopasowanie prowadzącego.
Bez idealnego rozwiązania
Nie ma idealnej, magicznej formuły, która określałaby, jak dużą przewagę będziesz potrzebować. W grę wchodzi kombinacja czynników - wielkość, kolor, pożądany efekt i przede wszystkim czytelność.
Zasadą jest, że punkt początkowy prowadzący jest zwykle taki sam, jak rozmiar czcionki, z której korzystasz. Niektóre programy, w szczególności przeglądarki internetowe, idą nieco dalej i ustawiają domyślną przewagę trochę wyższą niż wielkość punktu, zwykle przy domyślnej wartości 120 procent. Więc bloki, które zawierają 10-punktowy tekst, będą miały 12-punktowe prowadzenie.
Ta filozofia doskonale sprawdza się w przypadku dużych bloków tekstu, takich jak posty na blogu, które używają wspólnych krojów pisma bez ekstrawaganckich wznoszących się, zstępujących lub ligatur na jasnym, neutralnym tle (myślimy, że czarny jest biały lub beżowy). Utrzymujesz poczucie, że wszystkie linie tekstu idą w parze, dodając tyle miejsca, że jest łatwe dla oczu.
Bloki tekstu są najłatwiejsze do odczytania, gdy prowadzący jest szerszy niż odstępy między słowami. Ta proporcja pomoże ruchowi oka w poprzek strony, a następnie w dół, zgodnie z naturalnym przepływem odstępów od ciemności do światła.
Ta "normalna" wysokość linii będzie również odpowiednia dla rzeczy, które wymagają dużo czytania. Jest to standard używany przez wiele stron internetowych i publikacji drukowanych.
Trzymaj go mocno
Tight, lub negative, prowadzi, gdy linie typu są bliższe niż rozmiar punktu typu. Na przykład, jeśli Twój typ ma wymiary 14 punktów, każdy z wyprzedzających 14 punktów będzie uważany za ciasny, nawet jeśli nie pojawi się zbyt blisko siebie na ekranie.
Tight prowadzi może stworzyć poczucie ograniczenia. Może być również używany do tworzenia chaosu. Z drugiej strony, ściślejsze prowadzenie może być stosowane jako metoda łączenia elementów typu lub tworzenia wyraźnego poczucia organizacji. Przez wiele lat w prasie i Internecie, organizacje informacyjne wykorzystały jedne z najbardziej ciasnych wiodących specyfikacji dla rodzaju nadwozia. W druku chodziło o oszczędność miejsca; w Internecie jest utrzymanie poczucia wiarygodności i wyglądu związanego z organizacjami i ich partnerami druku.
Pomyśl o przypadku i literach, które znajdują się powyżej i poniżej wysokości x przy ustawianiu specyfikacji wysokości linii. Podczas pracy we wszystkich wersjach nie ma wznoszących się ani malejących, więc może być konieczne zaostrzenie odstępów między wierszami, takich jak technika używana przez Regenerate Music Co. To samo dotyczy czcionek, które mają krótsze wznoszące się i malejące.
Typ używany w większych rozmiarach, takich jak nagłówki lub logo, może czasami zyskać na bardziej zwartym prowadzeniu.
Poluzować
Luźne lub dodatnie prowadzenie prowadzi do dodawania odstępów, aby wiodący był większy niż rozmiar punktu używany dla typu. Na przykład, jeśli Twój typ ma wymiary 14 punktów, dowolne miejsce o wartości 15 lub więcej zostanie uznane za obluzowane. Przy niektórych krojach odstępy mogą wyglądać luźno na ekranie, mimo że są sklasyfikowane w ten sposób.
Luźne prowadzenie może sprawić, że strona stanie się lekka i przestronna. Jest to sprawdzona w czasie sztuczka dla projektantów, którzy dodają tylko wiodące, gdy typ jest zbyt gruby lub ciężki na stronie. Prowadzenie jest zbyt luźne, ale może być trudne do odczytania i podążania, jeśli używa się dużej ilości tekstu; najlepiej jest zarezerwować na kilka słów.
Większość projektantów dąży do tego, aby używać luźniejszych linii wiodących dla głównego typu na blogach i innych dużych blokach tekstu. Luźne, ale nie za luźne, prowadzenie może być łatwe do odczytania i naśladowania. Może sprawić, że mniejszy tekst będzie nieco większy niż jest i pomoże zrównoważyć wyjątkowo długie linie tekstu. Zwróć uwagę na użycie prowadzącego na blogu A List Apart, większy krój pisma dla ciała używa jednego speca, podczas gdy mniejszy typ na prawym pasku bocznym jest znacznie luźniejszy, dzięki czemu mniejszy typ łatwiejszy do śledzenia i równoważenia go z innymi elementami na stronie .
Wielu projektantów również wybiera luźniejsze prowadzenie przy użyciu krojów bezszeryfowych. Może to być szczególnie dobra opcja przy pracy z czcionkami z przesadnymi rozmytymi liniami lub ligaturami. Dodatkowa przestrzeń pozwala literom oddychać bez nakładania się.
Luźne prowadzenie jest również ważnym czynnikiem, jeśli zamierzasz używać dużej ilości pogrubionych czcionek lub czcionek o dużej gramaturze. Blog Bloggess używa kombinacji kolorów, pogrubienia i liter w całej witrynie, co prowadzi do pozytywnego przewodzenia niezbędnego narzędzia do czytania. W tym przypadku luźne prowadzenie pomaga również przyciągnąć wzrok do ważnych części tekstu, które są kolorowe i odważne.
Kolory tła i wiodące
Kolor i kontrast są szczególnie ważne przy wyborze wysokości linii.
Na ciemnym tle możesz użyć nieco bardziej wyprzedzającego niż na jaśniejszym tle, aby złagodzić uczucie masy. Ciemne kolory mogą dodawać wagi do Twojego projektu, jako że mogą być napięte, ale wybierając jedną lub drugą, możesz stworzyć więcej równowagi.
To samo dotyczy użycia koloru. Kolory, inne niż czarne i ciemne odcienie szarości, mogą dodawać różną wagę do projektu. W zależności od koloru tła, niektóre teksty mogą nawet wyglądać jak krwawienie na tle - dzieje się tak u niektórych osób, szczególnie podczas czytania czerwonego napisu na białym tle. Dodanie przewodnika może pomóc w uczynieniu tego tekstu bardziej czytelnym.
Zmiana szerokości i prowadzenia
Responsywny design sprawia, że zrozumienie prowadzenia (i pisania w ogóle) jest jeszcze ważniejsze.
Przy różnych rozdzielczościach ekranu i kształtach specyfikacja typu musi być odpowiednio dostosowana, aby strona pozostała czytelna. Gdy tekst kurczy się (lub rośnie) na ekranie, prowadzący musi odpowiednio się dostosować.
Pamiętaj, aby pamiętać o zachowaniu proporcji wysokości linii podczas dokonywania tych regulacji. Ponieważ typ będzie mniejszy dla urządzeń mobilnych i innych urządzeń z małym ekranem. Rozważ zwiększenie linii o 20 procent w stosunku do tego, co wykorzystałeś w projekcie na pełną skalę. Zwiększone prowadzenie powinno ułatwić czytelność w przypadku sparowania z mniejszym typem.
Dlatego podczas określania wiodących specyfikacji witryny musisz mieć kilka zestawów progów: jeden dla podstawowego projektu strony internetowej, drugi dla urządzeń średniej wielkości, takich jak iPad i inne, a drugi dla telefonów komórkowych. Każdy może mieć inny zestaw proporcji używany dla wysokości tekstu do linii.
Wniosek
Teraz, kiedy uzbrojony jesteś w wiele wiodących wskazówek i narzędzi, od czego zaczynasz?
Nie ma listy kontrolnej. Najlepiej jest rzucić okiem na typ i zobaczyć, jak się czuje (użyj staroświeckich sprawdzianów do oczu). Pozwól mu usiąść przez chwilę i wróć do niego ponownie później. Czy nadal czujesz to samo w tekście? Czy twoje odczucia pasują do tego, co myślisz o projekcie swojej witryny?
Zauważ, że jest to najbardziej efektywne, gdy blok tekstu zawiera rzeczywistą kopię zamiast tekstu zastępczego. Chcesz uzyskać realistyczny widok, a opcje zastępcze czasami zawierają nieparzystą liczbę liter, które nie są używane tak często w prawdziwej kopii.
Baw się tym. Pokazuj swój projekt tekstowy komuś innemu, aby uzyskać dodatkowe opinie. Zapytaj ich, jak się z tym czują.
Pamiętaj również, aby sparować blok tekstu z pozostałymi elementami projektu. To może nie być pierwszy krok, ale czasami połączenie wszystkiego razem może wywołać niezamierzone efekty. Upewnij się, że ponownie przejdzie test wzroku.