Piękna typografia. Dobre, złe i świetne przykłady typografii internetowej

Lista ta oparta jest na wynikach II kwartału. 2008 rok. Poprzednie "wykresy" można znaleźć i.

Każdemu przykładowi towarzyszy krótki komentarz, a kliknięcie zrzutu ekranu przeniesie Cię do oryginalnej witryny.

Konferencja Nasienna

Projektowanie wiadomości

OmniTI

Projektant.it

widok projektu

WordPress.org i WP 2.5.x Administrator

Nasz typ

Pokład

piekło tak koleś

Architekci informacji

Naz Hamid

John Tan

Rozważany

Zapasy Elliota Jay

Rzeczy, które tworzymy

W następnym artykule, Deep Typography for the Web, przyjrzymy się bliżej niektórym z tych witryn.

Jeremy Schoaf, kurator zasobu czcionek Typewolf, wybrał przykłady witryn z ciekawymi rozwiązaniami czcionek i opisał ich zalety i wady.

W połączeniu z cienką fakturą papieru, ta typografia sprawia, że ​​czujesz się, jakbyś czytał książkę.

Po prostu Gum

Dzięki web fontom, które pomagają dopasować typografię opakowania produktu do typografii strony producenta. Dzieje się to coraz częściej. Simply Gum wybrało Gotham jako swoją markę, zachowując spójność tożsamości zarówno w kanałach online, jak i offline.

Ta strona - dobry przykład co więcej, ponieważ czasami potrzebny jest tylko jeden styl. Używając różnych wag i nagłówków pisanych wielkimi literami w Gotham, Simply Gum ustanowiło wyraźną hierarchię z tylko jedną wagą.

Logo nagłówka i stopki są w formacie PNG, więc tracą czytelność i skalowalność czcionki internetowej. Używanie czcionki internetowej do logo nie zawsze jest możliwe, zwłaszcza jeśli potrzebujesz dobrej kontroli nad kerningiem; jednak w tym przypadku obraz SVG będzie działał lepiej niż obraz PNG, ponieważ można go skalować i nadal zachować ostrość.

Krótki wniosek

Na szczęście powyższe przykłady pokazały, jak pewne decyzje typograficzne mogą wpłynąć na projekt. Oto kilka kluczowych myśli dla Ciebie:

• Jeśli zamierzasz używać wielu wag, opracuj spójny system w swojej konkretnej typografii i trzymaj się go.
• W przypadku tekstu podstawowego wybierz czcionkę z normalną kursywą, pogrubioną i pogrubioną kursywą.
• Jeśli szukasz popularnego stylu, spróbuj połączyć go z mniej oklepanym stylem, aby wyróżnić swój projekt.
• Stwórz przewodnik po stylu na samym początku projektu, aby zapewnić spójne stosowanie czcionek wśród członków zespołu.
• Używaj kontrastujących, a nie podobnych stylów.
• Nie używaj czcionek ekranowych do tekstu podstawowego. Używaj czcionek zgodnie z przeznaczeniem.
• Nie bój się używać tylko jednej rodziny stylów. Możesz ustanowić hierarchię z różnymi wagami i stylami tej samej rodziny.
• Jeśli Twoje logo na to pozwala, stwórz je w formacie SVG, aby zapewnić czytelność i skalowalność.

Świetna strona internetowa zaczyna się od pięknej typografii. I choć niektóre zasady można złamać, czasami warto wrócić do podstawowych zasad tego, czym jest dobra typografia i jak ją tworzyć.

To przypomnienie pomoże ci spojrzeć świeżym okiem na swoje projekty, zastanowić się nad nowymi podejściami lub wrócić do prostszego projektu.

Dlatego dzisiaj zignorujemy trendy w modzie, skupimy się na teorii typografii i tym, jak „reguły” mogą nam pomóc w tworzeniu pięknego tekstu.

Rozmiar i hierarchia

Rozmiar ma znaczenie. Aby stworzyć czytelną typografię, może to być czynnikiem decydującym. Mały tekst jest trudny do zobaczenia, nie mówiąc już o przeczytaniu, ale zbyt duży przekroczy wysokość linii i spowoduje zamieszanie.

Czytelna typografia ma kilka warstw hierarchii. Warstwy te informują użytkownika, co należy przeczytać jako pierwsze, drugie i trzecie. Ponadto istnieje oczywista hierarchia rozmiarów tekstu — jeden rozmiar dla nagłówków, inny dla tekstu głównego, a trzeci dla podtytułów.

Śledzenie i kerning

Śledzenie i kerning są często mylone. Kerning to selektywna zmiana odstępów między literami w zależności od ich kształtu. Śledzenie to zmiana odstępów między zestawami liter, tj. akapitami lub całym blokiem tekstu.

Kerning jest często stosowany do określonych elementów, aby zapewnić przejrzystość, poprawić czytelność, a nawet stylizować duże fragmenty tekstu. Śledzenie jest często używane do zawężania zbyt szerokiego tekstu podstawowego.

Ogranicz liczbę stosowanych stylów czcionek

W przypadku większości projektów wystarczą dwa lub trzy style. Aby nie popełnić błędu przy wyborze, znajdź rodzinę czcionek za pomocą duża ilość dostępne odmiany czcionek. Czcionki najlepszej jakości są dostępne w szerokiej gamie stylów – pogrubione, regularne, kursywa, skondensowane, czarne itp.

Mieszaj i dopasowuj style

Polecam wybrać dwa różne style. Najczęstszą parą jest szeryf i bezszeryf. Łącząc różne style i wagi, szukaj liter o tej samej wysokości i kształcie miski (spacja wewnątrz zamkniętych liter, takich jak „o”).

Te drobne szczegóły będą miały duży wpływ na wygląd tych czcionek i czytelność tekstu.

Przelewy i uzasadnienia

W większości przypadków łamanie wiersza i justowanie nie są potrzebne. W przypadku tekst online techniki te tylko komplikują jego szybkie przyswojenie i zrozumienie. Dzielenie wyrazów zakłóca czytanie, a pełne uzasadnienie często skutkuje nieczytelnym formatowaniem.

Nie zmieniaj czcionek

Nigdy nie zmieniaj czcionki. Nie staraj się, aby był grubszy, cieńszy lub wyższy. Lepiej wybierz inny.

Projektanci kroju pisma poświęcają dużo czasu na upewnienie się, że krój pisma jest czytelny i spełnia wymagania stylistyczne. Nie musisz niczego zmieniać. Nie da się tego poprawić, a w większości przypadków wszystko tylko zepsujesz.

Jeśli czcionka Ci nie odpowiada, poszukaj czegoś innego. Użyj narzędzia Identifont podobne czcionki , które wykrywa podobne czcionki.

Kontrast

Użyj typografii, aby stworzyć kontrast. Podobnie jak przy użyciu różnych rozmiarów do tworzenia hierarchii, zwiększ zainteresowanie wizualne, zmieniając grubość, kolor i styl czcionki.

Kolor jest jednym z najbardziej efektywnych i proste sposoby tworzenie kontrastu. Idealnym kontrastem jest ciemny tekst na jasnym tle (lub odwrotnie). Masz prawie nieograniczoną gamę kolorów, które pomogą Ci osiągnąć ten cel. Bawiąc się kolorem i typografią, pamiętaj, że niektóre kombinacje kolorów, takie jak jasnoczerwony na jasnym niebieskim, mogą być dość trudne do odczytania.

Jeśli chodzi o kontrast, najlepiej użyć prostego tła, aby utworzyć czytelny tekst. Ale jeśli zawiera elementy wizualne, takie jak obrazy lub wzory, zwiększ rozmiar liter - spowoduje to separację między tłem a elementami tekstu pierwszego planu.

Format paska wybierania

Format paska typu to rozmiar pojemnika zawierającego tekst. Może to być szerokość całej ramki tekstowej lub pojedynczej kolumny.

Format ciągu ma znaczenie, ponieważ liczba znaków (w tym spacji, znaków specjalnych i interpunkcyjnych) na ekranie wpływa na czytelność. Jeśli linie są za długie lub za krótkie, nawigacja po nich będzie utrudniona dla oka użytkownika.

From The Elements of Typographic Style: „Dowolna liczba znaków, między 45 a 75, jest uważana za rozsądną długość linii w zestawie jednokolumnowym. Ciąg 66-znakowy (w tym litery i spacje) jest uważany za idealny. W przypadku zestawu wielokolumnowego idealny byłby ciąg o długości 40–50 znaków”.

Chociaż w momencie publikacji tej książki nikt nie myślał o typografii mobilnej, zalecenie dotyczące typografii wielokolumnowej jest nadal aktualne. W przypadku małych ekranów możesz użyć nawet 35 znaków w linii.

Tłumaczenie artykułu Carrie Cousins