Projektowanie typografii 101: przewodnik po zasadach i terminach

projektowanie ypograficzne jest wszędzie. Czy zauważyłeś kiedyś odstępy między wierszami na liście składników na odwrocie opakowania krakersów? Albo kształt cyfr na metce z ceną, a nawet wagi liter (czyli jak grube lub cienkie) na tabliczkach z nazwami ulic? To może nie są Twoje źródła inspiracji, ale są one codzienną częścią życia.

W rzeczywistości jesteśmy nieustannie otoczeni literami, gdziekolwiek nie spojrzymy. Wszystkie te źródła oferują nam różne perspektywy i spostrzeżenia oraz pokazują nam nieskończone sposoby wykorzystania typografii.

 

Zanim zagłębimy się w projektowanie typografii, przyjrzyjmy się, czym jest typografia i skąd się wzięła.

Krótka historia typografii

Czym jest projektowanie typograficzne? Krótko mówiąc, projektowanie typograficzne to sztuka układania przekazu w czytelną i estetyczną kompozycję. To integralny element projektu. Typografia nie prosi projektanta o narysowanie własnych liter, ale o pracę z czcionkami, które już istnieją. Proces ten wymaga od projektanta podjęcia szeregu decyzji, takich jak wybór odpowiedniego kroju pisma, wybór rozmiaru w punktach, dostosowanie kerningu i odstępów między wierszami oraz wymyślenie sensownego układu.

 

Można to zrobić szybko i łatwo za pomocą laptopów, komputerów, a nawet telefonów. Dzięki technologii typografia i jej zasady są codziennie kwestionowane przez nowe pokolenia projektantów, którzy wyobrażają sobie litery w sposób, którego jeszcze kilka lat temu nie mogliśmy sobie wyobrazić.

 

typ przykład

Kto powiedział, że arkusze informacyjne muszą być nudne? Przez andwalsha.

typ przykład

Prostota z dużą i odważną typografią jest zawsze dobrym wyborem. Przez Pentagram.

Ale nie zawsze chodziło o technologię. Czcionka ruchoma została wynaleziona na początku XV wieku dzięki Johannesowi Gutenbergowi i zrewolucjonizowała typografię, umożliwiając masową produkcję materiałów drukowanych. Jednak nawet zanim istniały techniki drukowania, ludzie nadal byli zdeterminowani, aby tworzyć książki lub plakaty z czcionkami. Po prostu zrobili to ręcznie, z dużą cierpliwością i poświęceniem. Ludzie zawsze tworzyli pisemne wiadomości – brak papieru i odpowiednich narzędzi do pisania nigdy nas nie powstrzymał. Starożytne cywilizacje wyrzeźbiły swoje glify w kamieniu lub drewnie.

 

Jeśli spojrzymy na ewolucję typografii oraz wszystkich dotychczas stosowanych narzędzi i technik, zauważymy nieustanną walkę między rękodziełem a maszyną, między tym, co organiczne, a tym, co geometryczne. Dziś radykalne rozdzielenie tych dwóch światów, a także ich harmonijne połączenie, rodzi nowe i niezwykłe rezultaty, napędzając niekończący się cykl typograficznych poszukiwań.

 

Terminy projektowania typografii, które musisz znać

Istnieje kilka podstawowych zasad i terminów projektowych, które musisz znać, zanim zagłębisz się w typografię. Oto najważniejsze:

 

Styl

Litery mają wiele różnych kształtów i stylów. Kategoryzacja ich może być nie lada wyzwaniem, ponieważ należy wziąć pod uwagę wiele czynników: ich wygląd, inspirację, epokę, w której się pojawiły i sposób ich wykorzystania. Dla uproszczenia często odwołujemy się do trzech głównych kategorii stylów, a następnie dzielimy je na mniejsze.

 

Szeryf

Pierwsze kroje szeryfowe były inspirowane tradycyjną kaligrafią i noszą nazwę Humanist lub Old Style. Styl ten charakteryzuje się gładkimi i zaokrąglonymi formami oraz niewielkimi wahaniami wagi.

 

humanistyczny krój pisma

Około połowy XVIII wieku pojawił się nowy rodzaj szeryfu, który obecnie nazywamy przejściowym. Ten styl wyznacza przejście między stylem humanistycznym a nowoczesnym, więc łączy trochę cech obu stylów.

 

Krój przejściowy

Pod koniec XVIII i na początku XIX wieku narodził się modny, radykalny styl szeryfowy: nowoczesny. Możemy rozpoznać ten styl po ostrym kontraście wagi i cienkich, prostych szeryfach.

 

Nowoczesny krój pisma

Wraz z rozwojem reklamy w XIX wieku wprowadzono szeryfy egipskie lub płytowe. Dzięki odważnemu wyglądowi i grubym szeryfom były preferowanym stylem wyświetlania komunikatów reklamowych.

 

Krój płyty S

Bezszeryfowy

Czcionki bezszeryfowe stały się popularne w XX wieku, a także miały wpływ kaligraficzny, dlatego nazywamy je również humanistami. Możemy zaobserwować lekkie wahania wagi i ogólnie ciepłą atmosferę.

 

Humanistyczny krój pisma

W połowie XX wieku powstała Helvetica, ustanawiając poprzeczkę dla Transitional bezszeryfowych. Litery te są jednolite i sztywniejsze niż poprzednio używane, pozbawione elementu rękodzieła.

 

Krój przejściowy

Geometryczne bezszeryfowe są odpowiednikiem nowoczesnych szeryfów. Zbudowane są na formach geometrycznych (litera O to idealne koło), a wierzchołki liter typu A czy N są ostre i mocne.

 

Geometryczny krój pisma

Kursywny

Litery skryptowe naśladują style pisane odręcznie i kaligraficznie i mogą być wszędzie, od eleganckich i formalnych po niechlujne i łatwe.

 

Krój pisma

Twarze pędzla są zbliżone do skryptów, ale czerpią inspirację z pisania pędzlem. Dzięki temu są odważniejsze i mniej eleganckie.

 

Krój pędzla

Wreszcie, styl gotycki lub Blackletter ma u podstawy tradycyjną kaligrafię z filcowych końcówek. Styl wywodzi się z maleńkiej karolińskiej, aw połowie XII wieku powstał nowy styl z ostrymi, prostymi i kanciastymi liniami.

 

Krój gotycki lub blackletter

Czcionka a krój pisma

Jestem pewien, że w pewnym momencie życia wszyscy byliśmy zdezorientowani co do różnicy między czcionką a krojem pisma. Zdecydowanie tak!

 

Krój pisma (lub rodzina czcionek) to wizualny projekt formularzy literowych i składa się z wielu formatów czcionek. W składu metalu za czcionkę uważa się zestaw liter fizycznych, zawierający każdą istniejącą literę, cyfrę i znak interpunkcyjny jako oddzielny element. W cyfrowym świecie czcionka to oprogramowanie, które instalujemy i używamy.

 

Pełna rodzina czcionek może zawierać przytłaczającą liczbę stylów: od bardzo cienkich do ultraczarnych i od bardzo skondensowanych do bardzo szerokich, wszystkie w wersji regularnej i kursywy.

 

Rodzaje czcionek

Ale czekaj, to nie wszystko. Niektóre twarze mają również małe litery (wielkie litery, które sięgają tylko do wysokości x), cyfry w linii i cyfry nieliniowane (liczby, które wykraczają poza linię bazową i wysokość x, integrując się bardziej płynnie w bloki tekstu), a w niektórych przypadkach nawet kilka dodatkowych alternatywnych postaci. To całkiem sporo, co?

 

Rodzaje czcionek

Anatomia

Anatomia liter jest dość złożona — każdy szczegół i każdy element ma swoje własne określenie.

 

Oto kilka z nich:

 

Wpisz anatomia

A oto kilka znaków interpunkcyjnych wraz z ich nazwami i poprawnym użyciem:

 

 

Rozpoznawanie złudzeń typograficznych

Litery są niesamowite nie tylko dlatego, że wyrażają tak wiele emocji, ale także dlatego, że mają zdolność oszukiwania naszych oczu.

 

Spójrzmy na kilka złudzeń optycznych występujących w projektowaniu typografii:

 

Iluzja 1

S wygląda na idealnie symetryczną literę, prawda? Cóż, nie jest. Po prostu obróć go o 180°, a zobaczysz, że góra jest w rzeczywistości mniejsza niż dół. Dzięki temu wygląda bardziej stabilnie i pewnie.

 

Iluzja czcionki

Iluzja 2

Mimo że wszystkie litery wydają się mieć dokładnie tę samą wysokość, okrągłe kształty są w rzeczywistości nieco większe. Na przykład przecięcie O z linią bazową i wysokością czapki to tylko jeden punkt. Podczas gdy przecięcie litery E, na przykład, dotyka tych linii całą swoją powierzchnią. Ponieważ obie litery mają technicznie ten sam rozmiar, będą wydawać się nieproporcjonalne. Musimy trochę przestrzelić O, aby były wizualnie równe.

 

Iluzja czcionki

Iluzja 3

Aby litera O wydawała się symetryczna i ma stałą wagę, musimy to zrobić – a nie stałą wagą. Odwróć literę O 90 °, a zdasz sobie sprawę, że boki są nieco grubsze niż góra i dół.

 

Iluzja czcionki

Iluzja 4

Ponieważ odwracamy litery, wypróbujmy tę samą sztuczkę z literą A. Odwrócenie jej w poziomie ujawni, że ta pozornie symetryczna litera w rzeczywistości nie jest symetryczna. Małe kody muszą być stosowane do niektórych liter, nawet jeśli oznacza to naruszenie zasady matematycznej, aby były wizualnie przyjemne.

 

Iluzja czcionki

Iluzja 5

Jeśli wiesz coś o kaligrafii, wiesz, że ruchy w górę są cienkie, ruchy w dół są grube, a ruchy poprzeczne znów są cienkie. Ta zasada musi być stosowana do nawet najprostszych i geometrycznych liter, takich jak na przykład litera T.

 

Iluzja czcionki

Iluzja 6

Można by pomyśleć, że poprzeczki w literach E i A teoretycznie znajdują się w środku litery. Cóż, pomyśl jeszcze raz. Aby litery wyglądały na dobrze wyważone, należy je lekko przesunąć. Możesz wyraźnie zobaczyć, że poprzeczka jest przesunięta po odwróceniu litery do góry nogami.

 

Iluzja czcionki

Iluzja 7

Litery B, P i R są kształtami siostrzanymi, z których jeden pochodzi od drugiego. Nie oznacza to jednak, że mają takie same proporcje. Miseczka R musi być nieco cieńsza, aby po połączeniu z nią nogi nie stała się super gruba. Górna miska litery B musi być mniejsza niż dolna, aby litera wydawała się bardziej stabilna.

 

Iluzja czcionki

Iluzja czcionki

Zasady projektowania typografii

Tak, wiem, zasady mają być łamane, ale żeby je łamać w sposób, który nie sprawi, że projektant będzie płakał, trzeba się ich najpierw nauczyć.

 

Pracując z tekstem i układając akapity na stronie musimy zwrócić uwagę na kilka czynników i upewnić się, że projektowany przez nas projekt będzie czytelny i przejrzysty. Z wyjątkiem oczywiście, jeśli tworzysz jakiś abstrakcyjny, eksperymentalny plakat typograficzny, mający na celu totalny chaos i anarchię. Jeśli to twój dżem, zrób to. Ale jeśli pracujesz z długimi tekstami, które mają nie tylko przyciągnąć wzrok widza, ale także przedstawić przekaz w prosty sposób, musisz pamiętać o każdej podejmowanej decyzji.

 

Wyrównanie

Wyrównanie oznacza umieszczenie korpusu tekst na stronie, a dokładniej, ustawiając jego krawędzie tych strony. Są 4 rodzaje wyrównania, ale mieć na uwadze, że brak jest mniej poprawne niż inne, po prostu mają różne spojrzenia i wyrażać różne wibracje.

 

Równo w lewo

Jest to prawdopodobnie najczęściej używane wyrównanie, ponieważ jest zgodne z naturalnym przebiegiem większości języków. Podczas korzystania z tego wyrównania należy zwrócić uwagę na stworzenie dobrze wyważonej prawej krawędzi, z długościami rzędów, które mają naturalny charakter.

 

Upewnij się, że unikasz samotnych słów w nowych wierszach. Nazywają się „wdowy” i są smutne.

 

Czcionka w lewo

Równo w prawo

W przeciwieństwie do wyrównania spłukiwania do lewej, spłukiwanie w prawo jest sprzeczne z naturalnym przepływem większości języków pisanych, co również może być wykorzystane na naszą korzyść. Pamiętaj jednak, że to wyrównanie tworzy niezwykły wygląd i może być trudne dla oczu, gdy jest używane w długich akapitach. Aby uzyskać czystą prawą krawędź, staraj się unikać wielu kropek lub przecinków na końcu rzędów.

 

Czcionka w prawo

Wyśrodkowany

Jeśli zrobisz to źle, wyśrodkowane wyrównanie może wyglądać na nudne i niechlujne. Jednak z dużą uwagą może stworzyć elegancki, ale dynamiczny charakter. Kluczem jest zabawa długością rzędów przy zachowaniu ogólnej równowagi.

 

Czcionka wyśrodkowana

Usprawiedliwiony

Chociaż może wyglądać nowocześnie i czysto, gdy jest dobrze zrobione, uzasadnione dopasowanie może bardzo szybko pójść źle. Ponieważ słowa muszą wypełnić cały wiersz, między nimi mogą pojawić się niezręczne odstępy. Upewnij się, że wszystko wyrównałeś ładnie i ponownie, jeśli to konieczne, baw się rozmiarem tekstu, długością pola tekstowego i kerningiem.

 

Wyrównanie czcionki

Śledzenie

Proces dostosowywania ogólnego odstępu między literami nazywa się śledzeniem lub odstępami między literami. W większości przypadków stosuje się śledzenie pozytywowe, a nie negatywowe, aby stworzyć bardziej otwartą i przewiewną kompozycję.

 

Im większy jest tekst, tym większa jest przestrzeń między literami, a więc śledzenie musi się zmniejszyć. Podobnie, jeśli rozmiar tekstu zmniejszy się, musimy zwiększyć śledzenie.

 

Śledzenie czcionek

Zwiększenie śledzenia może być trudne, ponieważ często mamy tendencję do nakładania więcej, niż jest to faktycznie potrzebne. Wskazówka do zapamiętania jest taka, że ​​wielkie litery umożliwiają bardziej hojne śledzenie niż małe litery.

 

Śledzenie czcionek

Kerning

Kerning odnosi się do modyfikowania odstępów między poszczególnymi literami. Mimo że w większości przypadków możemy ujść na sucho ze śledzeniem, czasami musimy się tam dostać i dostosować odstęp tylko między dwiema literami. Te „kernable” luki najczęściej pojawiają się wokół liter, takich jak A, W, V, T.

 

Och, spójrz, oto mała gra, która sprawdzi twoje umiejętności kerningu!

 

Jeśli pracujemy z dobrze skonstruowanymi krojami pisma, nie będziemy musieli stosować dużej ilości kerningu. Jeśli jednak to zrobimy, mamy możliwość zastosowania kerningu optycznego (który jest wykonywany automatycznie przez program, w którym pracujemy) lub kerningu metrycznego (który będzie wykorzystywał kerning, który był przewidziany podczas projektowania kroju pisma) w naszej aplikacji edycyjnej, lub możemy to wszystko zrobić ręcznie (korzystając z naszej intuicji i doświadczenia).

 

Kerning czcionek

Przeanalizuj swoje listy i zastosuj metodę śledzenia, która najlepiej pasuje do celu. Należy również pamiętać, że tylko dlatego, że kerning optyczny będzie działał dobrze dla określonego kroju pisma, nie oznacza to, że będzie to najlepszy wybór we wszystkich sytuacjach.

 

Prowadzący

Odległość między dwoma wierszami tekstu nazywana jest interlinią lub interlinią. Dostosowując go, możemy bawić się teksturą i kolorem akapitu, tworząc zainteresowanie wizualne i budując hierarchię. Optymalna wielkość odstępów między wierszami zależy od różnych rzeczy, takich jak ilość słów w stosunku do powierzchni użytkowej, wielkość wyświetlacza lub po prostu klimat, do którego dążymy.

 

Czcionki wiodące przykłady

Hierarchia

Hierarchia pomaga nam w tworzeniu zainteresowania wizualnego i prowadzeniu wzroku widza po stronie, dzięki czemu proces wchłaniania tekstu jest dużo łatwiejszy i intuicyjny. Najbardziej oczywistym i najłatwiejszym sposobem, w jaki możemy stworzyć hierarchię, jest zapisanie naszych informacji w różnych rozmiarach.

 

Możemy również stworzyć ciekawą hierarchię, modyfikując literę lub odstępy między wierszami lub dostosowując rozmiar naszego tekstu. Możemy również mieszać używane style lub kolory lub używać znaków specjalnych lub różnych wyrównań i układów.

 

Sposób, w jaki decydujemy się ułożyć nasz tekst – a konkretnie, jakie fragmenty umieścić na wierzchu – w dużej mierze zależy od tego, do jakiego rodzaju materiału przygotowujemy tekst: drukowany czy cyfrowy. Jeśli do druku, to czy jest to rozkładówka gazety z dużą ilością tekstu, okładka magazynu z tytułem głównym i krótsze, przedstawiające treść magazynu, czy plakat z tytułem i informacjami, takimi jak daty i miejsca? Jeśli jest to strona internetowa, jaki jest nasz cel ze stroną: jaka jest długość tekstu, który musimy wyświetlić i dla kogo go projektujemy?

 

typ przykład

Nie można mówić o typografii, nie wspominając o systemie tożsamości stworzonym przez Paulę Scher dla Teatru Publicznego.

Jednak korzystanie z hierarchii nie zawsze polega na podkreślaniu pewnych części tekstu. Możemy również wykorzystać hierarchię do tworzenia ciekawych wizualnie kompozycji, takich jak wzory i kształty, zmieniając gramatury, kolory i rozmiary.

 

Pamiętanie o tych wszystkich odniesieniach pomoże nam zbudować odpowiednią hierarchię, bez przytłaczania czytelnika.

 

przykład hierarchii

Idealny przykład czystej i prostej hierarchii: tytuł, treść i podpis obrazu. Via erdem özsaray.

przykład hierarchii

Możemy używać hierarchii nie tylko do kategoryzowania pewnych informacji, ale także do tworzenia angażujących obrazów. Przez Macmillana.

przykład hierarchii

Zwróć uwagę na efekt podobny do gradientu dzięki stopniowej zmianie wag. Via Typografische Monatsblätter.

Siatki

Jednym z najważniejszych elementów w procesie pracy z tekstem jest siatka, która może być zarówno prosta, jak i złożona. Używając siatek, w zasadzie oprawiamy w ramkę informacje na danej stronie. Daje nam to lepszą kontrolę nad tym, jak rozmieszczamy elementy na naszej stronie. Przy prawidłowym wykorzystaniu siatek możemy tworzyć kompozycje, które kierują wzrokiem widza, sprawiając, że informacje są łatwe do przetworzenia i zrozumienia.

 

Jak ze wszystkim, możemy pracować z prostymi i prostymi siatkami lub możemy poszaleć i wymyślić skomplikowane i złożone.

 

przykład siatki

Mimo że ogólna siatka tego układu jest raczej prosta i statyczna, duże pudełko pośrodku wraz z dwoma mniejszymi po bokach nadaje mu pewien ruch, czyniąc go wizualnie wciągającym. Via Süddeutsche Zeitung, ilustracja przez Dirka Schmidta.

Kolejną bardzo ważną rzeczą, o której należy pamiętać podczas porządkowania informacji na stronie, jest biała przestrzeń. Zaprzyjaźnij się z nim i trzymaj go zawsze blisko siebie.

 

Wiele osób ma ochotę wypełnić każdy zakątek strony tekstem lub obrazami, ale posiadanie dużej ilości białej przestrzeni jest zwykle dobrym pomysłem. Daje oddech informacji, sprawia, że ​​kompozycja jest bardziej przewiewna i ułatwia czytelnikowi poruszanie się po informacjach.

 

przykład siatki

Piękne przykłady kroju pisma i białej przestrzeni razem tworzą czystą i przewiewną kompozycję. Via Arbeitsform: Rochade.

przykład siatki

Nie ma nic złego w szaleństwie z układem, o ile tekst pozostaje czytelny. Przez futuraproject.cz.

Siła typografii

Projektowanie typograficzne ma ogromną moc wpływania na przekaz. Gdy jest używany we właściwy sposób — odpowiednia kombinacja stylu, rozmiaru, hierarchii, kerningu i odstępów między wierszami — nie ma nic, czego nie można za jego pomocą wyrazić. Od formalnych i eleganckich stron po dynamiczne i oszałamiające kompozycje — możesz zrobić wszystko, co tylko wymyśli Ci wyobraźnia.

 

Rozumiejąc zasady i fakty dotyczące liter oraz różne sposoby ich używania, jesteśmy w stanie wyrażać się za ich pośrednictwem na nieskończone sposoby. Te zasady są niczym innym jak przewodnikiem. Gorąco zachęcam do przełamania ich wszystkich! Ucz się, eksperymentuj, zapominaj, czego się nauczyłeś, popełniaj błędy i zacznij od nowa. W ten sposób wypracujesz styl, który jest dla Ciebie unikalny.

 

Chcesz dowiedzieć się więcej o typografii? Sprawdź najnowsze trendy w zakresie czcionek, najlepsze pary czcionek i najlepsze czcionki logo.

  • TAGS

LEAVE A REPLY