Jak sprawić, by Twój typ był bardziej atrakcyjny w sieci
Nierzadko zdarza się, że projektant w dzisiejszym świecie nie zwraca uwagi na to, jak układany jest typ, zwłaszcza przy tak wygodnych domyślnych ustawieniach tagów nagłówków i bezpiecznych czcionek internetowych powszechnie dostępnych w Internecie.
Jeśli jako projektanci interaktywni jesteśmy w stanie poświęcić trochę więcej czasu na typografię, wyniki będą wskazywać na unikalny, dobrze przemyślany projekt, który będzie przeciwstawny kreacji "biegu młyna".
Istnieje duża szansa, że większość projektantów i wzorów, które podziwiasz, prezentuje dobre przykłady typografii.
Pokażę ci kilka kroków, które podejmuję w celu ulepszenia typu zestawu, aby były bardziej atrakcyjne niż te domyślne scenariusze 24-bitowych znaczników H1 wraz z 13-piksem ustawionym w Times New Roman.
Nie zadowalaj się domyślnymi ustawieniami, wszyscy to robią.
Tutaj mamy zawsze taki wspólny wygląd nagłówka wraz z kawałkiem kopii ciała do naśladowania. To nie przyciąga cię ani nie odróżnia od innych próbek, tak jak on, prawda? Aby uczynić tekst bardziej atrakcyjnym wizualnie, najpierw wprowadzimy kilka zmian za pomocą naszego wyboru czcionki.
Wybierz czcionkę, która będzie miała większą wagę wizualną wraz z nagłówkiem
Chociaż wybór czcionki nie jest dokładnie "typografią", w rzeczywistości jest to kwintesencja komponentu, który pomaga typowi na stronie odróżnić się od innych elementów. Wraz z nadejściem @ font-face, ogromne możliwości wyboru są dostępne dla projektantów w dowolnym miejscu.
Tutaj użyłem czcionki Extra Condensed Gothic Style, którą można łatwo znaleźć na stronie darmowych czcionek, takich jak FontSquirrel.com. Jeśli zatrzymamy się i pomyślimy o tym, nazwa "skondensowana" powinna coś znaczyć, ponieważ jest w rzeczywistości bardziej gęsta niż zwykły członek rodziny w stylu książkowym, a dokładnie tego chcemy od nagłówka: coś, co przyciąga użytkownika i naprawdę odróżnia się od kopii ciała. Na pewno uda się przyciągnąć twoją uwagę lepiej niż oryginał, ale jest kilka rzeczy, które możemy zrobić, aby ulepszyć tekst.
Spraw, by był bardziej atrakcyjny dzięki dwóm wierszom CSS
Natychmiastowa zmiana jest w literach; wszystkie są teraz skapitalizowane, ale teraz mają również negatywne kerning pomiędzy każdą z liter (technika przeniesiona z projektowania gazet).
Obie te cechy można łatwo uzyskać za pomocą CSS, { text-transform: wielkie litery; i odstępy między literami: -Xpx; }. Dzięki wprowadzeniu tych dwóch linii wartości zmian kodowania, powoduje to znaczną poprawę wizualnej wagi, szczególnie w stosunku do oryginału.
Wypracuj ostatnie drobiazgi
W następnym kroku czcionka użyta w akapicie body faktycznie zmieniła się w czystszy sans-serif, który lepiej uzupełnia tekst nagłówka. Zbliżamy się do bardziej wizualnie atrakcyjnego projektu, ale jest kilka zmian, które możemy zrobić, aby oczyścić go jeszcze bardziej.
Jak pokazują zielone wskaźniki, istnieją nierówne marginesy i to, co typografowie lubią nazywać "sierotą". Które jest pojedynczym słowem, które spada do ostatniej linii akapitu. Tworzy on bardzo nierówną wagę wizualnie w porównaniu z resztą tekstu, a problem ten można łatwo rozwiązać, nieznacznie zmieniając brzmienie tekstu.
Jeśli chodzi o marginesy, nie ma reguły, że wszystkie muszą być równe. Jeśli jednak rozpoczynasz karierę w projektowaniu stron internetowych, dobrze jest mieć równe marginesy, dopóki nie poznasz i nie nauczysz się technik, które pozwolą ci wyjść poza wytyczne składu i nadal osiągnąć swój cel wizualnie.
Po utworzeniu bardziej zrównoważonego obrazu na płótnie, usuwając sierotę i dostosowując marginesy, można zobaczyć wynik końcowy, dobrze dobrany typ próbki, który jest wygodny tam, gdzie się znajduje.
Jakie są twoje najlepsze wskazówki dotyczące typografii internetowej? Daj nam znać w komentarzach!