Wybór odpowiedniej typografii (np: czcionka ozdobna, czcionka szeryfowa, czcionka szeryfowa) dla Twojej witryny może wpłynąć na Twój projekt pozytywnie lub go zepsuć. Właściwy krój pisma może poważnie ulepszyć Twój projekt. Wybierz złą czcionkę, a możesz stracić odwiedzających, ponieważ jest zbyt trudna do odczytania, niełatwa dla oka lub daje całkowicie błędne wrażenie na temat tego, co robisz i czym się zajmujesz.
Powiedzenie „dobry design jest niewidoczny” jest szczególnie prawdziwe w przypadku technologii cyfrowych. Projektant cyfrowy będzie miał znacznie mniejszą kontrolę nad tym, jak użytkownik końcowy wybierze sposób wyświetlania swoich dzieł. Rozmiar urządzenia / ekranu, rozdzielczość ekranu, a nawet kalibracja ekranu, wszystko to będzie miało wpływ na starannie dobrane decyzje projektowe.
Niezależnie od tego, czy jesteś projektantem, czy programistą, ten artykuł przedstawi CI podstawowe informacje, które musisz wiedzieć, aby uzyskać właściwą typografię, aby zapewnić piękno praktyczność w idealnej harmonii.
Poznaj swój krój – podstawy
Krój pisma a czcionki – jaka jest różnica?
Cóż, jeśli technicznie jesteśmy poprawni (a technicznie powinniśmy być), powinienem powiedzieć tak:
„Kroje pisma i czcionki to nie to samo”.
Rozumiem, dlaczego możesz się pomylić, ponieważ terminy są tak często używane zamiennie, ale aby wyjaśnić, dlaczego są to różne rzeczy, oto, co musisz wiedzieć:
Krój pisma: odnosi się do ogólnego projektu czcionki. Obejmuje wszystkie style tego typu. Na przykład Futura w całości jest klasyfikowana jako krój pisma.
Czcionka: to styl (lub plik) zawarty w kroju pisma. Na przykład, obie czcionki to Futura Italic lub Futura book Bold. Są to czcionki należące do rodziny / krojów pisma Futura.
W miarę upływu czasu terminów tych używamy zamiennie, nie ma więc potrzeby zbytniego grzęznąć w terminologii.
Rodzaje krojów
Kroje pisma można podzielić na 5 głównych kategorii. Oto bardzo krótki przegląd:
Czcionka szeryfowa
Szeryf to mały kształt lub obrys, dołączony do początku lub końca znaku / litery. Krój szeryfowy jest dostępny w różnych smakach, takich jak stary styl, tradycyjny, neoklasyczny i płyta. Mogą być używane w nagłówkach i treści. Czcionki szeryfowe są prawdopodobnie uważane za najłatwiejszy do odczytania typ czcionki.
Czcionka Bezszeryfowa
Czcionki te są prostsze, minimalistyczne i często uważane za bardziej nowoczesną alternatywę dla szeryfów. Zwykle mają mniejsze różnice w szerokości obrysu niż kroje szeryfowe. Podobnie jak kroje szeryfowe, mogą być również używane do nagłówków i kopii treści.
Odmiany w rodzinie Sans-Serif obejmują Grotesque, Square, Geometric and Humanistic.
Krój odręczny i Skrypt
Skrypty obejmują kroje pisma odręcznego, kursywnego, kaligrafii, formalnego i czarna litera (blackletter) . Często najlepiej zarezerwowane dla nagłówków i treści dekoracyjnych.
Display / Czcionka ozdobna
Jak nazwa może sugerować, kroje pisma Display są przeznaczone do używania w dużym rozmiarze, co oznacza, że są one zalecane tylko w nagłówkach. Czcionki ozdobne są świetne, jeśli szukasz czegoś wyjątkowego, może trochę nowatorskiego lub oryginalnego.
Monospace
Często zarezerwowane do użytku w aplikacjach, które muszą wyświetlać kod, kroje pisma o stałej szerokości nie są proporcjonalne – każda litera zajmuje taką samą ilość miejsca.
Czytelność, dostępność i najlepsze praktyki
Dobry wybór kroju pisma jest niezbędny dla pozytywnego doświadczenia użytkownika. Zanim więc przejdziemy dalej, przyjrzyjmy się kilku podstawowym kwestiom, które należy wziąć pod uwagę, zanim zaczniesz szukać swojego idealnego fontu.
Ogranicz liczbę używanych czcionek do minimum
Istnieje wiele sposobów tworzenia unikalnego projektu bez używania innego kroju pisma dla każdego elementu. W rzeczywistości często można osiągnąć większą przejrzystość przy mniejszej ilości. Pojedynczy krój pisma może zawierać 10 różnych stylów czcionki, co ułatwia tworzenie oszałamiających rezultatów za pomocą tylko jednego kroju.
Pomyśl o kontraście
Chociaż miękka bladoszara czcionka może pięknie wyglądać w szkicu lub Photoshopie (zwłaszcza na Twoim nowym błyszczącym 27-calowym iMacu), co się z nią stanie, jeśli użytkownik będzie próbował ją przeczytać na zewnątrz? Albo w autobusie ze słońcem świecącym przez ramię? A co, jeśli nie używa najnowszego wyświetlacza Retina i ma stary monitor. A jeśli Twój odbiorca ma ponad 40 lat i potrzebuje okularów? A jeśli po prostu ma słaby wzrok?
Przejrzystość jest to fundament. Nie pozwól, by coś przeszkadzało. Narzędzia takie jak Contrastchecker.com mogą pomóc Ci upewnić się, że nie jest to przerost form nad funkcją , sprawdzając, czy schemat kolorów spełnia minimalne wymagania dostępności dla kontrastu. Jeśli chcesz, aby ludzie czytali Twoje treści, ułatw im to!
Pamiętaj o ujemnej spacji / białej przestrzeni
Negatywna przestrzeń nie tylko pomaga w ustaleniu hierarchii i zwraca uwagę na elementy i określone treści, ale także sprawia, że Twoja witryna jest o wiele bardziej czytelna.
Mniej znaczy zawsze więcej. Naprawdę nie musisz wypełniać każdego rogu ekranu, aby przekazać swoją wiadomość. Duża ściana tekstu z łatwością przytłoczy odwiedzających, więc dobrze wykorzystaj podziały wierszy, odstępy między akapitami i białe znaki, aby zapewnić optymalną czytelność.
Jeśli zdezorientujesz, przegrasz
Choć może to być kuszące, aby zrobić coś dziwacznego i sprytnego ze swoim projektem, nie zapominaj: „Najpierw rzeczy najważniejsze”. – Steven Covey.
Długość linii
Jeśli kiedykolwiek odwiedziłeś witrynę, w której tekst zajmuje całą szerokość dużego wyświetlacza, jest niezwykle trudny do odczytania. To jest powód, dla którego gazety używają kolumn!
Istnieje wiele sposobów ustalenia dokładnie, jaka jest optymalna liczba znaków w wierszu, ale ogólnie rzecz biorąc, jeśli zastosujesz od 45 do 75 znaków, nie możesz się bardzo pomylić. Zwykle pracuję z maksymalną szerokością 650 pikseli dla tekstu akapitu.
Jak wybrać krój pisma?
Mając na uwadze podstawy, możemy przejść do części kreatywnej- wybrać odpowiedni krój pisma do Twojego projektu. Do pobrania dostępne są dosłownie miliony czcionek. Jak więc znaleźć odpowiednie dla swojego projektu?
Zacznijmy od tego, co już wiesz o kliencie swoich klientów (grupie docelowej):
- Dla kogo właściwie jest ten projekt strony internetowej?
- Co wiesz o użytkowniku końcowym?
- O czym jest ta witryna?
- Jak chcesz, aby docelowi odbiorcy czuli się, gdy przeglądają Twoją witrynę?
- Jaki klimat lub nastrój próbujesz przekazać? Zabawny czy profesjonalny i biznesowy? Poważny czy zabawny i dziwaczny
- Czy docelowi odbiorcy mają jakieś specjalne wymagania? Na przykład, czy tworzysz witrynę internetową dla osób starszych?
- Co będą robić Twoi goście w witrynie? Czy tylko przeglądają strony internetowe, żeby zabić czas, poszukać informacji czy też chcą wykonać inne zadania? Jakie są „prace do wykonania”?
- Jakie rodzaje treści należy prezentować? (Badania, posty, wiersze, eseje, wizualizacje?)
- Co Twoi użytkownicy uważają za ważną rzecz?
Następnie zastanów się, czy istnieją ograniczenia narzucone przez klienta, takie jak:
Branding
Czy istnieje przewodnik dotyczący marki / stylu, który należy znać? Przewodnik po stylach oparty na druku może być świetnym punktem wyjścia, ale może być konieczne jego poprawienie i dopracowanie, aby zapewnić jednolitą tożsamość marki w wersji cyfrowej.
Funkcjonalność
Jak ważna jest szybkość witryny? Czy ma znaczenie, czy wybór kroju pisma ma wpływ na czas ładowania strony? Czy potrzebujesz więcej niż jednego kroju pisma, aby uzyskać pożądany wygląd i styl, i czy potrzeba podjęcia takiej decyzji projektowej ma negatywny wpływ na szybkość strony? Sprawdź rozmiar pliku kroju pisma, aby zobaczyć, jak może wpłynąć na czas ładowania strony – możesz użyć tego, aby ułatwić sobie proces wyboru.
Koncesjonowanie
Czy klient jest gotowy zapłacić za licencję na używanie czcionki premium, która może wzmocnić i / lub wzmocnić jego markę, a jeśli tak, to czy naprawdę musi? Czy nadal możesz reprezentować markę za pomocą szybciej ładującej się alternatywy dla jej kroju premium? Czy kupią czcionkę od razu, czy skorzystają z usługi subskrypcji, takiej jak Adobe.
Wszechstronność
W tym miejscu naprawdę pomocne może być użycie rzeczywistej treści. Czy wybrany krój pisma ma wystarczającą liczbę czcionek (grubości i stylów), aby obsługiwać różne typy treści, dla których projektujesz?
Język
Czy projekt strony www będzie w języku polskim? Czy trzeba to przetłumaczyć na inne języki? Czy może być konieczne przetłumaczenie w przyszłości? Jeśli tak, czy wybrany krój to obsługuje?
(Wskazówka dotycząca wydajności: możesz zmniejszyć rozmiar pliku czcionek, jeśli wykluczysz niepotrzebne języki).
Zapoznanie się z powyższymi pytaniami pomoże ci podjąć pewne logiczne decyzje dotyczące wyboru typograficznego. Celem jest stworzenie krótkiej listy wymagań, eliminując wszystko, co zostanie uznane za nieodpowiednie na podstawie Twoich odpowiedzi.
Gdy już to zrobisz, możesz bezpiecznie rozpocząć zabawę z kilkoma opcjami ze swojej podręcznej listy i zobaczyć, co działa najlepiej!
Gdzie znaleźć kroje pisma / czcionki do witryn internetowych
Jeśli postępujesz zgodnie z powyższym procesem, będziesz już wiedział, czy Twoje wyszukiwanie powinno obejmować kroje pisma premium (płatne), czy bezpłatne, open-source.
Kiedyś dysponowaliśmy tylko kilkoma czcionkami „bezpiecznymi w Internecie”. Dziś mamy tak wiele do wyboru, że samo w sobie stało się formą sztuki. Istnieje nieskończona liczba dostępnych opcji od setek różnych dostawców.
Szukanie czcionek w Internecie
Czcionki Google (bezpłatne), Adobe Fonts (płatne) i MyFonts.com (płatne) to tylko kilka przykładów, w których można znaleźć czcionki internetowe . Każdy dostawca ma własne warunki licencyjne, więc warto się z nimi zapoznać i upewnić się, że Twój klient też je zaakceptuje.
Jak można się spodziewać, bezpłatne czcionki od Google są powszechnie używane, szczególnie te dobre, dlatego jeśli szukasz czegoś wyjątkowego lub markowego, prawdopodobnie sprawdzisz opcję premium (niestandardową) .
Niestandardowe kroje pisma nie są pozbawione własnych problemów. „Błysk nie ostylowanego tekstu” (FOUT) może pojawić się na sekundę lub dwie, podczas gdy niestandardowa czcionka jest ładowana przez JavaScript.
Dla osób z przyzwoitym połączeniem internetowym jest to ledwo zauważalne, jednak jeśli wiesz, że Twój rynek docelowy nie będzie miał dostępu do szybkiego Internetu, prawdopodobnie będziesz chciał tego uniknąć. Programiści opracowali kilka różnych sposobów radzenia sobie z FOUT, ale w chwili pisania tego tekstu żaden z nich nie był doskonały.
Czcionki internetowe wymagały kiedyś różnych plików dla różnych przeglądarek – lista ta zawierała plik TrueType (.ttf), plik Web Open Font Format (.woff), osadzony plik OpenType (.eot) i plik Scalable Vector Graphics (.svg). Obecnie (zakładając, że nie musisz obsługiwać przeglądarki Internet Explorer), jedyne potrzebne pliki to .woff lub .woff2, możesz również dołączyć .eot i .ttf.
Dostępnych jest wiele bezpłatnych zasobów, które pomogą Ci znaleźć inspirację do typografii. Kilka z nich dodałem poniżej, ale oprócz takich witryn, pomocne może być zachowanie listy witryn napotykanych podczas przeglądania sieci. Szybkie spojrzenie na kod źródłowy dostarczy Ci nazwy używanych krojów pisma. To także może być dobrym punktem wyjścia.
Sprawdź:
Fontsquirrel
1001freefonts
Fontspace
Jak wybrać solidną parę czcionek?
Jeśli jeden krój nie spełnia Twoich potrzeb, możesz spróbować dodać drugi krój do swojego stosu. Idealne połączenie czcionek może być rzeczą piękną, tworząc atrakcyjny wizualnie układ bez potrzeby stosowania dodatkowych elementów, jednak znalezienie odpowiedniej kombinacji może być trudne. Zbyt podobny, a Twój projekt będzie wyglądał na niechlujny, zbyt inny, a wynik będzie drażniący.
Jak więc znaleźć idealne zestawienie czcionek? Każdy projektant ma swój własny sposób rozwiązania tego problemu. Dla mnie odkryłem, że najłatwiejszą metodą jest najpierw wybranie czcionki nagłówka lub treści (przy użyciu procesu wyboru, o którym mówiliśmy wcześniej), a następnie rozpoczęcie procesu eliminacji.
Wróć do założeń projektowych i najpierw znajdź krój, który spełnia te wymagania. Znacznie ułatwi to znalezienie dobrego dopasowania, w przeciwieństwie do przeglądania milionów możliwych kombinacji.
Szukając mocnego połączenia czcionek np: czcionka szeryfowa i czcionka ozdobna, czcionka szeryfowa i czcionka ozdobna lub czcionka szeryfowa i czcionka bezszeryfowa, warto również pamiętać o następujących kwestiach:
Hierarchia
Wracając do treści, jakie typy treści musisz przedstawić i w jaki sposób Twój stos czcionek może Ci w tym pomóc? Możesz mieć nagłówki, podrzędne, nagłówki, treść, tekst przycisków, cytaty i tak dalej.
Które kroje pasują do Twojego początkowego wyboru, aby pomóc Ci ustalić silną wizualną hierarchię. Gdzie chcesz, aby czytelnik spojrzał w pierwszej kolejności i czy Twój wybór pomoże Ci to osiągnąć? Uważaj, aby nie polegać na kolorze czcionki w celu wskazania hierarchii (dostępność nie-nie).
Czytelnosć
Wracając do treści, jakie typy treści musisz przedstawić i w jaki sposób Twój stos czcionek może Ci w tym pomóc? Możesz mieć nagłówki, podrzędne, nagłówki, treść, tekst przycisków, cytaty i tak dalej.
Które kroje pasują do Twojego początkowego wyboru, aby pomóc Ci ustalić silną wizualną hierarchię. Gdzie chcesz, aby czytelnik spojrzał w pierwszej kolejności i czy Twój wybór pomoże Ci to osiągnąć? Uważaj, aby nie polegać na kolorze czcionki w celu wskazania hierarchii (dostępność nie-nie).
Uzupełniający
Jeśli wybrany krój pisma ma kilka stylów czcionek (grubości, duże / małe litery itp.), Możesz osiągnąć dobrą harmonię, korzystając z wyboru z tej samej rodziny. (Technicznie nie jest to parowanie, ale sprawdź to, zanim zaczniesz szukać alternatywy). Pomocne może też być znalezienie czcionek podobieństw do początkowego wyboru. Na przykład czcionki o podobnej wysokości x często pasują do siebie.
Kontrast
Dostosowując styl, rozmiar, wagę, odstępy / interlinię, a nawet kolor, możesz stworzyć wystarczający kontrast, aby projekt był wizualnie stymulujący i obejmujący.
Klasyczne pary
Jeśli wszystko inne zawiedzie, wypróbuj klasyczną kombinację czcionek. Serif z bezszeryfowym (i odwrotnie) jest często świetnym punktem wyjścia. Szybkie „parowanie czcionek” w Google zwróci setki wyników, które możesz przejrzeć, aby sprawdzić, czy coś pasuje do Twojego projektu.
Chociaż nie są tak wyjątkowe, te wypróbowane i przetestowane kombinacje są popularne nie bez powodu. Istnieją strony internetowe poświęcone wyłącznie pomocy w opanowaniu sztuki idealnego łączenia czcionek.
Wyszukaj parę czcionek:
Podsumowanie
Jako projektant masz pewność, że chcesz tworzyć oszałamiające wizualnie układy do swoich projektów cyfrowych, ale jeśli chodzi o krój pisma, oszałamiający wizualnie to dopiero początek. Wraz ze wzrostem zapotrzebowania na projekty integracyjne, doskonalenie kroju pisma w twoich projektach jest umiejętnością, którą warto opanować.
Dla programisty tworzenie dostępnych, zorientowanych na użytkownika witryn i produktów jest czymś, do czego należy dążyć i zdaniem wielu (w tym nas) powinno być standardem.
Treść każdej witryny lub produktu jest dosłownie najważniejsza. Korzystając z powyższej metodologii, jesteś na dobrej drodze do dostarczania doświadczeń online, które łączą formę i funkcję, aby zapewnić jak najlepsze wyniki dla wszystkich.
