Kluczowe czynniki responsywnej typografii internetowej

4

Mówi się „Nigdy nie oceniaj książki po okładce", ale badania pokazują, że wystarczy 50 milisekund, aby użytkownik online zdecydował, czy powinien pozostać na Twojej stronie, czy nie.

Inne badanie przeprowadzone przez Stanford, które dotyczyło wiarygodności sieci, wykazało, że 75% użytkowników przyznało się do oceniania wiarygodności firmy na podstawie projektu ich witryny. Świetna typografia internetowa jest bramą do generowania większej liczby zapytań biznesowych i późniejszych konwersji.

Jest rzeczą oczywistą, że informacje muszą być prezentowane atrakcyjnie i efektywnie. Problem polega jednak na tym, że istnieje duża różnorodność urządzeń mobilnych i dlatego typografia musi być dostosowana do wszystkich tych platform.

Jak więc najlepiej wykorzystać typografię internetową?

1 Rozsądne użycie czcionek gwarantuje, że typografia jest responsywna, a jednocześnie skuteczna

Odkąd wprowadzono funkcję Font Face, projektanci stron internetowych z zadowoleniem przyjęli swobodę używania różnych czcionek w swoich projektach. Stanowiło to wyraźny kontrast z wcześniejszą erą, kiedy używano tylko bezpiecznych kolorów internetowych.

Mając do dyspozycji wiele czcionek, projektanci muszą wiedzieć, jak z nich korzystać. Responsive Web Design jest używany przez większość stron internetowych i wyznaczył granice gry typografii, która jest obecnie projektowana zgodnie z różnymi rodzajami urządzeń i odpowiednimi rozmiarami ekranów. Dlatego projektanci stron internetowych muszą zachować ostrożność podczas łączenia wielu czcionek w responsywnym systemie projektowania stron internetowych. Nie używaj zbyt wielu krojów pisma na stronie internetowej. Raczej trzymaj się zestawu trzech. Zapewni to czystszy i bardziej efektywny projekt strony internetowej. Jednocześnie unikaj używania bardzo popularnych czcionek, ponieważ mogą one nie dać Twojej stronie przewagi nad innymi.

Studium przypadku: Zamówienie vox.com. Ta strona łączy dwie czcionki Sans-Serif i robi to bez wysiłku. Używają Balto do wszystkich swoich nagłówków, Alright Sans do tekstu głównego, z wyjątkiem Harriet, która jest przeplatana wewnętrznie w witrynie. Uzyskany wygląd jest czysty i elegancki.

Wręcz przeciwnie, sprawdź stronę angelfire. Ta strona zawiera wiele czcionek i wygląda na zaniedbaną i nieprofesjonalną.

2 Zaznacz nagłówki

Badania nad typografią internetową wykazały, że typografia strony internetowej wyróżnia jej nagłówki. Przekłada się to na to, że odwiedzający spędzają więcej czasu w Twojej witrynie. Aby to osiągnąć, użyj glifów i ligatur, aby nadać swoim nagłówkom niepowtarzalny wygląd.

Ligatury to litery, które wydają się być ze sobą połączone. Na przykład litery f oraz i, które tworzą pierwszą część słowa fish, są połączone czcionką jako „fi”. Ligatury można łatwo dodawać za pomocą ustawień funkcji czcionek w przeglądarce lub korzystając z funkcji „Renderowanie tekstu — optymalizacja czytelności”. Firefox ma już domyślne ligatury. Użycie określonej kombinacji ligatur w określonych typach czcionek może dodać piękna i stylu Twojemu projektowi internetowemu. Ligatury można włączać i wyłączać w menu Tekst, Typ lub Typ otwarty oprogramowania do układu strony. Oprogramowanie zapewni automatyczne wstawianie ligatur w miejscach, w których łączą się powiązane litery.

Studium przypadku: Zajrzyj na tę stronę internetową, a od razu zobaczysz, jak elegancko wyglądają ich ligatury. Te pięknie wykonane nagłówki po dodaniu do Twojej witryny z pewnością poprawią jej wygląd i zapewnią widzom lepsze wrażenia użytkownika.

3 Spraw, aby Twoja witryna przemawiała do odbiorców poprzez odpowiednie użycie czcionek o różnych rozmiarach i kolorach

Jak widać na powyższym rysunku, musimy wybrać takie czcionki, które będą czytelne i widoczne zarówno na ekranach urządzeń mobilnych, jak i na ekranach komputerów stacjonarnych. Styl, w jakim czcionki pojawiają się na nośnikach drukowanych, różni się od tego, w jaki sposób pojawiają się na nośnikach cyfrowych. Musimy zrozumieć rodzinę czcionek, styl i efekt. Specyfikacje czcionek internetowych są podane w specyfikacjach CSS W3C, które stwierdzają, że Serif, Sans-Serif, Monospace, Fantasy i Cursive to rodziny czcionek.

Po drugie, wybierz krój pisma zgodnie z tematem lub kategorią witryny. Dzięki temu Twoja strona internetowa będzie przemawiać do docelowych odbiorców i przyniesie pożądany rezultat. Czcionki szeryfowe można również wykorzystać do zwiększenia czytelności tekstu, co dodatkowo pomaga wyostrzyć oddziaływanie głosu. Problem polega na tym, że ten atrybut Serif działa dobrze na ekranach o wysokiej rozdzielczości, ale może prowadzić do niepożądanych wyników na ekranach o niższej rozdzielczości. Zaleca się stosowanie czcionek artystycznych dla krótkich nagłówków, a bardziej stonowanych czcionek dla tekstu podstawowego.

4 Modulacja miary jest ważna dla responsywnej typografii

Długość linii strony internetowej musi być modulowana. Modulacja miary lub długości linii czcionki przyczynia się do responsywności typografii. Projekty responsywne obejmują responsywne zmiany czcionek zgodnie z wymaganiami różnych rozmiarów ekranu. Dlatego jest to koniecznością.

Termin „miara” lub „długość linii” ma związek z czytelnością lub sposobem, w jaki ludzie czytają fragment tekstu w sieci. Zwiększanie lub zmniejszanie długości linii czcionki to jeden ze sposobów generowania responsywnej typografii internetowej. Idealna długość wiersza lub miara wynosi od 45 do 75 znaków w wierszu na wydruk lub stronę internetową, wliczając spacje i znaki interpunkcyjne. Można to rozszerzyć do 45-85 znaków w linii. Zostało to wyprowadzone z badań nad sposobem, w jaki ludzie czytają tekst i odpowiadającymi im ruchami gałek ocznych. Na tej podstawie niektórzy eksperci zalecają, aby tekst wyrównany do lewej był odpowiedni dla treści internetowych, ponieważ ruchy oczu podczas czytania są poziome od lewej do prawej.

Studium przypadku: pakiet witryn internetowych ogranicza liczbę znaków w wierszu do około 75 znaków. Jak widać, wygląda elegancko i potrafi zaciekawić widzów podczas czytania.

Z drugiej strony strona internetowa gatesnfences ma co najmniej 120 znaków w linii. W rezultacie wygląda to niesmacznie i zniechęciłoby do zapoznania się z treścią.

5 Użycie różnych rozmiarów czcionek poprawi czytelność w różnych odległościach od ekranu. Jest to wymóg responsywnej typografii.

Wybierz rozmiar czcionki, który zapewnia, że ​​czcionka jest widoczna i czytelna. Może to wymagać kompromisu w sprawie „idealnej miary”, co może być nieco trudne dla projektantów. Problem polega na tym, że „idealna miara” obejmuje albo zmniejszenie rozmiaru czcionki, albo zwiększenie rozmiaru czcionki, co może sprawić, że tekst będzie nieczytelny. Najważniejsze jest to, aby treść była czytelna dla widzów. Dlatego jednym z kluczowych elementów responsywnej typografii jest zapewnienie różnych rozmiarów czcionek dla różnych odległości czytania. Istnieje metoda obliczania rozmiaru czcionki postrzeganego przy różnych odległościach czytania i dostępne są kalkulatory rozmiarów, które to umożliwiają.

Studium przypadku: Sprawdź witrynę Moonbase. Jest to strona internetowa, która pomaga klientom projektować ich strony internetowe i brandować ich firmy. Tekst na środku obrazu wyróżnia się i przekazuje znaczenie tego, o czym jest witryna. Widzimy to na pierwszy rzut oka. Przyciąga to uwagę użytkownika i skłania do przejrzenia reszty strony, która jest napisana standardową czcionką.

6 Responsywna typografia wymaga, aby przeglądarki internetowe mogły obsługiwać różne czcionki

Podczas projektowania witryn internetowych z określonymi niestandardowymi czcionkami należy upewnić się, że przeglądarka obsługuje ładowanie i wyświetlanie tych czcionek. Nawet jeśli Twój kod jest wolny od błędów i przejrzysty, problemy z kompatybilnością przeglądarki mogą zniweczyć Twoje wysiłki. Musisz także sprawdzić, czy format, w którym zapisane są pliki czcionek, jest zgodny z czcionką, której chcesz użyć na stronie internetowej. Problemy z niezgodnością mogą mieć wpływ na ładowanie czcionek, a tym samym na wyświetlanie stron internetowych.

Studium przypadku: z powyższego możemy wywnioskować, że musimy albo użyć standardowych czcionek, albo użyć „stosów czcionek”. Pierwszym krokiem jest „testowanie czcionek”, aby dowiedzieć się, czy czcionka jest „bezpieczna w Internecie”, czy nie. Zasadniczo przeglądarka traktuje każdą sekwencję czcionek jako pierwszą wybraną czcionkę, drugą wybraną czcionkę, trzecią wybraną czcionkę i tak dalej. Jeśli przeglądarka nie może znaleźć żadnej z czcionek w sekwencji, przywróci domyślną czcionkę Serif, Sans Serif lub Monospace, w zależności od użytej klasyfikacji czcionek.

Na przykład duży odsetek systemów operacyjnych ma czcionkę Century Gothic. Możesz zatem utworzyć stos czcionek, który zaczął się od Century Gothic jako pierwszej wybranej czcionki, następnie Arial, Helvetica, a na końcu ogólną klasyfikację Sans-Serif. Zwróć uwagę, że w CSS czcionki z wieloma słowami w tytule muszą być umieszczone w cudzysłowach. Na przykład rodzina czcionek: „Century Gothic”, Arial, Helvetica, Sans-Serif.

To kazałoby przeglądarce najpierw wyszukać czcionkę Century Gothic. Ponieważ duża część systemów ma tę czcionkę, większość Twoich widzów zobaczy witrynę wyświetlaną przy użyciu Century Gothic. Dla widzów bez Century Gothic przeglądarka cofnęłaby się najpierw do Arial, potem Helvetica, a na końcu do alternatywy Sans-Serif.

7 Czynniki związane z cechami fizycznymi czcionek mogą wpływać na elastyczność wykorzystania czcionek w projektach

Chociaż istnieje duża elastyczność w odniesieniu do miary, odstępów między wierszami, rozmiaru czcionki i chociaż ich odmiany można dostosować do układu, responsywna typografia może być ograniczona przez czynniki, które wpływają na same glify. Są to waga, szerokość, kontrast obrysu, pochylenie i rozmiar optyczny. Zmiany tych parametrów mogą mieć wpływ na witrynę. Dostępne są narzędzia, które pomagają projektantom przezwyciężyć te ograniczenia, projektując różne rodzaje stylów czcionek poprzez matematyczne interpolacje między rodzinami czcionek w ramach określonych przez nie parametrów fizycznych.

Dwa przykłady takich narzędzi to Superpolator lub FlowType.js. W miarę zmniejszania się rozmiaru ekranu względna proporcjonalna różnica między skalami zwiększa się. Dlatego musi istnieć równowaga między rozmiarem ekranu a względną skalą. Mając to na uwadze, opracowano niektóre skale, które można wykorzystać do projektowania bardziej wpływowych stron internetowych. Proporcja odnosi się do tego, ile razy czcionka nagłówka jest większa lub mniejsza niż tekst główny. Dlatego potrzebujemy responsywnej typografii. Potrzebujemy typografii, która dostosuje się, by kurczyć się w punktach przerwania, ponieważ projektanci nie mogą zadawać sobie trudu resetowania wszystkich swoich stylów bazowych dla każdego elementu typograficznego na swojej stronie.

Studium przypadku: Sprawdź typ przepływu. Przeciągnij suwak, a zobaczysz, co potrafi responsywna typografia dzięki narzędziom takim jak Superpolator i FlowType.js.

Responsywna typografia jest doskonalona wraz z praktyką. Mając pewną wiedzę na temat korzystania z zapytań o media i zestaw urządzeń o różnych rozmiarach ekranu do testowania, możesz to opanować. Teraz, gdy wiesz, co należy zrobić, aby mieć najlepszą typografię, przyciągać więcej wyświetleń i konwertować więcej leadów, możesz wdrożyć powyższe zasady, aby zobaczyć ich materializację w fizycznej rzeczywistości.

Comments are closed, but trackbacks and pingbacks are open.

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów