Wybór krojów pisma do swoich projektów internetowych może być wyzwaniem. I jest to zbyt łatwe, aby zatopić dużo czasu w projekcie internetowym w rozwoju, zastępując typ za typem, nigdy nie osiągając celu. Spójrzmy na wszystko co musisz wiedzieć o łączeniu czcionek.
Łączenie czcionek w twoim projekcie internetowym
Jak wiele innych części projektu, typografia ma wytyczne, które ułatwiają odkrywanie idealnych par krojów. Pokażemy ci, jak mieszać czcionki, i zapewnimy ci kilka wspaniałych kombinacji dla twojego biznesu.
1. Używaj czcionek, które mają różne odcienie
Pismo może przekazywać emocje. Kroje pisma, których używamy do wyrażania słów, wpływają również na nasze myśli. Wiele czcionek jest poważnych i profesjonalnych, podczas gdy inne są przyjemne i nieformalne. Osobowości krojów pisma ujawniają znaczenie tekstu, który wyświetlają. Podczas wybierania czcionek strony internetowej, łączenie różnych tonów z typografią tworzy wizualnie oszałamiające kontrasty.
Rozważ ton tego, kogo lub co strona będzie reprezentować przy wyborze kombinacji czcionek. Wesoły krój pisma byłby odpowiedni dla firmy zabawkarskiej, ale może wyglądać dziwnie na stronie firmy prawniczej. Z drugiej strony, zbyt poważne szeryfy mogą być dużo dla czegoś lekkiego.
Jednym z najważniejszych czynników do rozważenia jest to, jaki krój pisma będziesz używać do nagłówków i body copy. Poziomy nagłówków zapewniają większą swobodę w krojach pisma, ponieważ mają większą skalę. Czcionka, która jest przyjemna dla oka, jest wymagana dla body copy w mniejszych rozmiarach tekstu.
Nie bój się używać przeciwstawnych tonalnie krojów pisma w układach witryny; czasami kontrast może wzbudzić zainteresowanie.
2. Stosuj pary krojów, które różnią się między sobą, ale nie za bardzo.
Unikaj mieszania krojów pisma w nagłówkach, które są praktycznie identyczne z tymi używanymi w treści strony. Używaj kilku krojów pisma, które różnią się od siebie wizualnie, ale jednocześnie uzupełniają się wzajemnie.
Co się stanie, jeśli połączymy krój z kaligraficznymi akcentami, jak na przykład Great Vibes, z krojem szeryfowym, jak Merriweather? W rezultacie, projektowi brakuje równowagi i ma nieprzyjemne poczucie kontrastu.
Rozwinięcia i pętle Great Vibes mają kojące wrażenie i nutę wyrafinowania. Northwood jest nieformalnym krojem pisma z szeryfami i ogonkami, podczas gdy Merriweather jest bezsensownym krojem pisma o formalnym charakterze, przekazywanym przez jego szeryfowe formy literowe. Tutaj kontrast jest zbyt silny, aby kombinacja zadziałała.
Spróbujmy bardziej przyjemnej kombinacji czcionek. W nagłówku użyj Vollkorn, nieco zabawnej czcionki. W nagłówku użyj Open Sans, bardziej neutralnego i prostego kroju bezszeryfowego. Ta kombinacja działa dobrze, ponieważ pomimo różnicy w krojach pisma, subtelność obu sprawia, że są one wizualnie zgodne.
3. Używaj trzech lub mniej różnych krojów pisma
W większości projektów zastosujesz jeden krój pisma internetowego do nagłówka i inny do korpusu. W celach kreatywnych w projekcie można również zastosować ręczne napisy i bardziej stylizowane kroje pisma. Niezależnie od tego, jak bardzo kuszą Cię wszystkie dostępne darmowe kroje pisma, na jedną stronę internetową potrzebujesz tylko trzech krojów.
Wielu projektantów używa superrodziny krojów pisma do swoich projektów. Superrodzina to rodzina krojów pisma spokrewniona z jedną lub kilkoma innymi rodzinami. Może zawierać różnice stylistyczne, takie jak kursywa, wersje od lekkich do ciężkich, szeryfowe i bezszeryfowe, między innymi. Najbardziej przyjemną rzeczą w superrodzinach jest to, że eliminują one zgadywanie dotyczące dopasowania krojów pisma, ponieważ są one stworzone do pracy razem.
Pojedyncze kroje pisma mogą być używane na różne sposoby, gdy są połączone w superfamilie. Spójrz na te opcje superrodziny Roboto. Różnica między Thin 100 Italic i Regular 400 nie jest subtelna.
Większość krojów pisma jest sklasyfikowana w superrodzinach, co oznacza, że masz wiele alternatywnych czcionek, z którymi możesz eksperymentować, jednocześnie używając tego samego stylu.
4. Przekazuj wizualną hierarchię poprzez parowanie czcionek
Wizualizuj strukturę hierarchii komunikacyjnej za pomocą różnych wzorów, rozmiarów i kolorów krojów pisma. Możesz użyć typografii do przekazania informacji wizualnej o względnej ważności innych części treści. Najbardziej zauważalne powinny być nagłówki, następnie podtytuły i treść. Użyj kombinacji czcionek, aby dodać wyraźne poczucie struktury do swojego pisma.
5. Użyj rozmiaru czcionki, aby zasugerować porządek
Ogromny krój czcionki reprezentuje to, co najważniejsze, podczas gdy zmniejszające się rozmiary czcionek reprezentują hierarchię informacji. Wszystkie wielkie litery to świetny sposób, aby wyróżnić krytyczne elementy, takie jak wezwania do działania. Używanie wszystkich wielkich liter z umiarem jest w porządku, jednak należy unikać sytuacji, w której tekst wydaje się zły lub wrogi.
Większość początkujących projektantów integruje różne rozmiary czcionek, aby ustanowić hierarchię wizualną, ale istnieją inne metody eksponowania skali wizualnej.
6. Eksperymentuj z różnymi wagami
Względną ważność pokazują większe wagi, podczas gdy lżejsze wagi sugerują niższy szczebel w hierarchii. Jak widzieliśmy w przypadku nadrodziny Roboto, można wiele osiągnąć za pomocą jednego kroju pisma, zmieniając jego wagę.
7. Zmieniaj kolory czcionek
Chociaż nie chcesz używać kalejdoskopu kontrastujących kolorów w swoim projekcie, zróżnicowanie odcieni tekstu może pomóc konkretnym terminom wyróżnić się. Bardziej intensywne kolory, takie jak czerwony i fioletowy, są używane do nagłówków. Jaśniejsza odmiana kontrastuje z ciemniejszymi wersjami, reprezentując kopię, która powinna być czytana jako pierwsza. Upewnij się, że kolory czcionek, z którymi eksperymentujesz, nie zgubią się w tle.
8. Szeryfy
Kroje pisma serif, które są czytelne w druku, pochodzą z końca 1700 roku i początkowo miały na celu zapewnienie czytelności.
Szeryf to wąska linia lub kreska, która została dodana do litery. Bezszeryfowe kroje pisma mają wiele wizualnych wskazówek, które pomagają oczom czytelników podążać za nimi. Szeryfowe kroje pisma zwiększają efektywność skanowania, zwłaszcza w przypadku długich bloków tekstu, takich jak w książkach.
Na początku istnienia komputerów, rozdzielczości ekranów, które były zbyt niskie, aby kroje pisma oparte na szeryfach mogły być efektywnie renderowane, powodowały problemy. Z drugiej strony, projektanci graficzni mogą teraz korzystać z wielu szeryfów dzięki dzisiejszym wyświetlaczom o wysokiej rozdzielczości.
Zawsze łącz krój serif z czcionką bezszeryfową, gdy używasz jednego z nich. Kroje pisma serif są często zbyt podobne, co prowadzi do nieprzyjemnego dopasowania czcionek.
Kroje pisma serif są bardzo elastyczne. Poniżej przedstawiono niektóre z najczęstszych i najbardziej pomocnych rodzajów czcionek widzianych w tekście pisanym. Są one proste do odczytania w różnych rozmiarach, co czyni je idealnymi dla body copy i nagłówków.
Pomysł na parowanie czcionek: EB Garamond i Montserrat
Połącz serif EB Garamond z Montserrat dla nagłówka i zmniejsz jego rozmiar dla body copy. Kiedy czcionki szeryfowe są używane do długich bloków tekstu, działają lepiej, kiedy są mniejsze.
Pomysł na połączenie czcionek w pary: Libre Baskerville i Raleway
Bardziej wyraziste szeryfy i kanciastość Libre Baskerville kontrastują z cienkimi liniami Raleway.
9. Szeryf bezszeryfowy
Brak dodatkowych linii odróżnia szeryfy bezszeryfowe od szeryfowych. Szeryfy bezszeryfowe mogą być używane do akapitów lub tekstu głównego w mniejszym rozmiarze, lub mogą być połączone z szeryfem w nagłówkach.
Istnieje garść krojów pisma, o których należy pomyśleć, jeśli chodzi o kombinacje czcionek.
Przyjrzyjmy się najczęstszym rodzajom krojów pisma i niektórym kreatywnym możliwościom, które możesz dziś wykorzystać.
Pomysł na parowanie czcionek: Open Sans i Lato
Niektórzy projektanci mogą uważać czcionki takie jak Open Sans i Helvetica za staromodne, ale są one znane. Open Sans to pierwotny, ale mile widziany krój pisma, który dobrze współpracuje z różnymi czcionkami. Weź pod uwagę jego lody waniliowe: to fundament, na którym możesz zbudować wiele innych pysznych rzeczy.
Na przykład, użyj Open Sans w nagłówku i Lato w tekście głównym. W pozostałej części strony użyj innego bezszeryfowego kroju pisma.
10. Czcionki do wyświetlania
Jeśli musisz przyciągnąć uwagę ludzi, czcionki ekranowe są idealne. Są one zazwyczaj napisane w pięknych i skomplikowanych kształtach liter, takich jak duże i pogrubione lub rzadkie i cienkie. Używaj krojów pisma zaprojektowanych specjalnie do wyświetlania, jeśli chcesz, aby Twój projekt wyróżniał się i pozostawiał wrażenie.
Pomysł na połączenie czcionek: Bubblegum Sans i Open Sans
Bubblegum Sanc ma jasne kształty liter, które dobrze komponują się z neutralnością Open Sans.
Pomysł na parowanie czcionek: Poiret One i Lato
Poiret One to doskonały nowoczesny font, jeśli szukasz odrobiny wyrafinowania. Jego subtelne liternictwo inspirowane art deco i cienkie linie sprawiają, że jest to świetny współczesny font. Krój ten fantastycznie wygląda z bardziej skromnym krojem pisma, takim jak Lato. Kontrast tego rodzaju działa dobrze razem z bardziej subtelnym krojem pisma, takim jak Lato.
11. Kroje monospacjalne
W kroju monospace wszystkie znaki są jednakowej szerokości. W przypadku krojów o różnych szerokościach standardowa miara pozioma odróżnia je od krojów o różnych szerokościach, dając im poczucie spójności. Czcionki jednopasmowe od dawna były popularne w informatyce z powodu ich prostoty i możliwości dostosowania do wczesnych wyświetlaczy o niskiej rozdzielczości.
Pomysł na połączenie czcionek: IBM Plex Mono i PT Sans
IBM Plex Mono to współczesny krój pisma o tożsamości wizualnej idealny dla startupów i innych organizacji związanych z technologią. Został on stworzony jako hołd dla firmy IBM. Bezszeryfowe kroje pisma, takie jak ten, są łatwiejsze dla oczu i dają lepsze poczucie kontrastu, gdy są używane z PT Sans.
Pomysł na parowanie czcionek: Roboto Mono i Roboto
Wielu projektantów preferuje Roboto ze względu na jego doskonałą czytelność. Ta kombinacja czcionek, która łączy Roboto Mono z regularną wersją, jest wygodna do oglądania.
Typografia jest niezbędna w projektowaniu stron internetowych
Stworzenie solidnej obecności online nie jest łatwe. Istnieje kilka czynników, które należy wziąć pod uwagę podczas wykonywania tego zadania. Zachowaj taką samą ostrożność w dobieraniu par czcionek jak w przypadku palety kolorów. Kroje pisma, które wybierzesz, sposób w jaki je stylizujesz i ich czytelność przyczyniają się do doświadczenia użytkownika z Twoją stroną internetową. Znajdź najfajniejsze kroje pisma, które odzwierciedlają osobowość Twojego projektu i oferują odwiedzającym najprzyjemniejszy sposób jej doświadczania.
