Sobota, 21 maja 2022

5 prostych sposobów na poprawienie typografii stron internetowych

21 kwietnia 2022

Typ czcionki jest jednym z najczęściej używanych elementów stron internetowych. Pomyśl o tym. Jeśli nie jesteś serwisem YouTube lub Flickr, istnieje duże prawdopodobieństwo, że odwiedzający Twoją witrynę będą szukać treści tekstowej, a nie fantazyjnego opakowania, które ją otacza. Dlaczego więc projektanci stron internetowych wciąż traktują tekst jak element drugorzędny?

Dobra typografia wprowadza porządek na stronie i zwiększa czytelność. Pozwala ludziom szybciej przetwarzać informacje.

Bardziej czytelna i łatwa do zeskanowania strona oznacza zadowolonych użytkowników. Zadowoleni użytkownicy często wracają, kupują produkty, zostawiają komentarze i dzielą się stroną z przyjaciółmi. Widzisz, dlaczego warto o tym pomyśleć?

Mógłbym bez końca rozwodzić się nad tym, jak daleko typografia zaszła w sieci i jak daleko jeszcze musi się posunąć. Często miotam się między projektowaniem stron internetowych a drukowaniem. Kiedy przechodzisz z InDesignu do TextMate'a, ograniczenia czcionki internetowej są oczywiste.

Ale wiele już powiedziano o tym, czego czcionka internetowa nie potrafi. To nie będzie kolejna tyrada. Zamiast tego skupmy się na 5 prostych sposobach rozwiązania problemów związanych z typografią, których pełno w sieci.

1. Użyj arkusza stylów Reset

Głupie, ale prawdziwe: Żadna przeglądarka nie używa tych samych domyślnych ustawień prezentacji. Różnice w wypełnieniu, marginesach, nagłówkach i wcięciach są ogromne. Jeśli chcesz, aby układ strony był bardziej spójny we wszystkich przeglądarkach, warto zacząć od arkusza stylów CSS Reset.

Polecam dwa z nich:

Yahoo's CSS Reset Stylesheet
Eric Meyer's CSS Reset Stylesheet
.

2. Pilnuj swojej miary

Miara odnosi się do długości pojedynczego wiersza czcionki. Dłuższa linia = dłuższa miara. Badania wykazały, że dla optymalnej czytelności, kolumny tekstu, takie jak główna część tekstu, powinny mieć długość 45-75 znaków (30-50 emów) łącznie ze spacjami. Jest to jeden z powodów, dla których płynne projekty (takie, w których kolumny rozszerzają się i kurczą, dopasowując się do szerokości przeglądarki) są trudniejsze dla oczu.

Dodatkowo, lead powinien wzrastać wraz z długością działania. Wiodąca linia to ilość białej przestrzeni między wierszami tekstu, którą kontroluje się za pomocą właściwości CSS line-height. Jeśli musisz użyć bardzo długiej miarki, upewnij się, że nagłówek się otworzy.

Podobnie, jeśli masz małą kolumnę, taką jak pasek boczny, z krótką miarką, lead powinien być ciaśniejszy. Uważam, że domyślna wartość przypisywana przez większość przeglądarek jest nieco zbyt wąska. Wysokość linii około 1,4em jest odpowiednia dla większości treści.

3. Zwróć uwagę na odstępy między wierszami

Nie chodzi tylko o tekst, ale także o przestrzeń, która go otacza. Zbyt mała przestrzeń utrudnia czytanie tekstu, ale zbyt duża również. Kluczem jest znalezienie prostej równowagi, która prowadzi wzrok od jednego elementu do następnego.

Jednym z najczęstszych błędów popełnianych przez początkujących projektantów jest wypełnianie każdego centymetra przestrzeni. Biała przestrzeń to pusta lub "negatywna" przestrzeń wokół treści i ma ona kluczowe znaczenie. Spójrz na dobrze zaprojektowany magazyn, taki jak "Dwell" czy "Good", a zobaczysz, że mimo iż druk każdej strony kosztuje wydawcę pieniądze, pozostawiają oni dużo białej przestrzeni wokół tekstu. Strona będzie zrównoważona, a wzrok użytkownika będzie efektywnie przemieszczał się z miejsca na miejsce.

Poza dostosowaniem wysokości linii (jak wspomniano w punkcie 1), spróbuj zwiększyć wyściełanie i marginesy. O ile nie próbujesz zastosować jakiejś szalonej sztuczki wizualnej, wokół tekstu zawsze powinna być odpowiednia ilość białej przestrzeni. Nie dopuszczaj do tego, by tekst nachodził na inne elementy, zwłaszcza obrazy. Pozwól oddychać fragmentom treści (nagłówkom, akapitom, paskom bocznym itp.).

Mark Boulton napisał bardzo pouczający artykuł o białej przestrzeni dla A List Apart, sprawdź go.


4. Nie szalej z czcionką

Dobra zasada dla każdego projektanta brzmi: nie używaj więcej niż dwóch krojów czcionek w swoim projekcie. Dwa kroje czcionek mogą wyglądać bardzo stylowo. A List Apart używa odmian Georgii i Verdany, aby stworzyć elegancki i dopracowany wygląd. Jednak ciągłe dodawanie fontów do interfejsu wprowadza niepotrzebne zamieszanie. Podobnie należy unikać stosowania zbyt wielu rozmiarów czcionek, kolorów i sposobów ich przetwarzania na stronie lub w akapicie, ponieważ będą one ze sobą konkurować, zamiast podkreślać to, co zamierzano.

Mimo że stosy czcionek i technologie takie jak sIFR i Typeface.js pozwalają na określenie dowolnej czcionki jako domyślnej, należy oprzeć się pokusie, aby zaszaleć z tekstem. Czcionki ozdobne najlepiej zachować dla nagłówków, ponieważ wpływają one na czytelność. Zastanów się - kiedy ostatnio wziąłeś do ręki powieść napisaną w całości czcionką Comic Sans?

Tworząc stosy czcionek, zwróć uwagę na wielkość łączonych czcionek. Niektóre czcionki, które wyglądają podobnie, są wyświetlane w bardzo różnych rozmiarach. Verdana i Arial są tego doskonałym przykładem. Typetester to świetne narzędzie do porównywania podstawowych czcionek internetowych i tworzenia udanych stosów. Inne przydatne narzędzie o nazwie Font Stack Builder pokazuje, jaki procent użytkowników zobaczy każdą odmianę.

Niezależnie od tego, jakie czcionki zdecydujesz się użyć, upewnij się, że nie są one maleńkie. Wiem, że to trudne... mały tekst wygląda fajnie. Ale pomyśl o biednych, mrużących oczy użytkownikach! Tekst nie powinien być większy niż 10 lub 12 pikseli. Jeśli upierasz się przy malutkim tekście, zastosuj przynajmniej rozmiar względny dla tych wszystkich użytkowników IE 6.0, którzy w przeciwnym razie nie mogliby go powiększyć. Przeczytaj artykuł Wilsona Minera na temat rozmiarów czcionek, aby dowiedzieć się więcej na ten temat.

5) Nie zaniedbuj szczegółów

Klient dostarczył treść. Dodanie jej do strony to tylko kwestia skopiowania i wklejenia, prawda? Nieprawda, nieprawda, nieprawda. To pułapka, w którą zbyt często wpadają projektanci stron internetowych.

Nawet ci z nas, którzy sumiennie dodają znaczniki nagłówków, formatują każdy akapit i starannie układają listy wypunktowane, zapominają o kilku ważnych szczegółach typograficznych. Wielu z nas (w tym ja) nie przeszło formalnego szkolenia z typografii, więc nie można nas za to całkowicie winić. Ale diabeł tkwi w szczegółach. Nadszedł czas, abyśmy zajęli się tymi podstawami:

Używaj inteligentnych cudzysłowów

Jaka jest różnica między inteligentnymi cytatami a głupimi cytatami? Inteligentne cudzysłowy (zwane też książkowymi lub krzywymi) są zakrzywione i mają styl otwierający i zamykający. Nieme (proste) cudzysłowy są zazwyczaj proste w górę i w dół. Apostrof jest typograficznie tylko pojedynczym cudzysłowem, więc dotyczy go ten sam problem. Cudzysłów niemy (nazywany też pierwszorzędnym) powinien być stosowany tylko między miarami. Na przykład w wyrażeniu 6'4″ stosuje się cudzysłów podwójny i pojedynczy.

Niestety, nasze klawiatury domyślnie stosują cudzysłów. Microsoft Word i inne edytory tekstu po prostu poprawiają je za nas w trakcie pisania. Dodanie cudzysłowów do stron HTML wymaga więcej pracy od programisty, ponieważ trzeba użyć znaczników, aby utworzyć symbole otwierające i zamykające cudzysłów. Ten sam problem widzę w przypadku em- i en-kropek, wielokropków, znaków towarowych i symboli praw autorskich. Koderzy idą na łatwiznę, zastępując je myślnikami, wielokrotnymi kropkami, dużym TM i niesławnym (C). Używanie właściwych symboli rzeczywiście robi różnicę wizualną. Zrób to dobrze i wywołaj uśmiech na twarzach redaktorów na całym świecie.

Jak tworzyć inteligentne cudzysłowy:

#8216; = otwierający pojedynczy cytat&#8217
= zamykający pojedynczy cytat&#8220
=

otwierający podwójny cytat&#8221
= zamykający podwój


ny cytat

Wiem - nikt nie chce spędzać całego dnia na szukaniu cudzysłowów. Na szczęście narzędzia takie jak SmartyPants i Textism mogą wykonać większość pracy za Ciebie, automatycznie formatując tekst, który zawiera inteligentne cudzysłowy i tym podobne.

Przeczytaj "The Trouble with EM and EN" z A List Apart, aby uzyskać więcej szczegółów na ten temat i zapoznać się z kodowaniem znaków UTF-8 dla większości popularnych znaków specjalnych.

Jedno zastrzeżenie - wiele edytorów tekstu CMS (takich jak ten, którego używa ta strona) nie pozwala na implementację inteligentnych cudzysłowów bez dodatkowych wtyczek. Smutne, ale prawdziwe.

Przestań stawiać dwie spacje po kropce. Proszę! Nie jest to konieczne i jest raczej denerwujące.

W linkach używaj border-bottom: 1px solid zamiast text-decoration: underline. Podkreślenia mogą przebiegać przez znaki zstępujące (g, j, p, q, y), co utrudnia ich odczytanie, zwłaszcza przy użyciu mniejszych rozmiarów czcionek.

I chociaż nie ma to nic wspólnego z typografią, szybkie sprawdzenie pisowni jeszcze nigdy nikogo nie zabiło. Nawet jeśli wszystko, co zrobiłeś, to skopiowałeś i wkleiłeś, błąd ortograficzny, który prześlizgnie się na żywą stronę, źle świadczy o wszystkich zaangażowanych.

Zwróć uwagę na te 5 poprawek, a projekty Twoich stron na pewno się poprawią. Pamiętaj, że to tylko punkt wyjścia. Dobra typografia jest umiejętnością wyuczoną, tak jak wszystko inne, i wymaga nauki i praktyki. Zawsze obserwuj strony, które robią to dobrze i zwracaj uwagę na to, co robią. Potrzebujesz inspiracji? Sprawdź poniższe strony, na których znajdziesz przykłady świetnej typografii internetowej, i zamieść przykłady, które uważasz za inspirujące.

Inspirująca czcionka:

  • Subtraction
  • A List Apart
  • Architekci informacji
  • Jon Tangerine
  • Projektowanie wiadomości
  • Andy Rutledge

Napisany wyłącznie dla WDD przez Mindy Wagner.

Co sądzisz o tych prostych sposobach na poprawienie typografii? Czy stosujesz je na swoich stronach? Chętnie się od Was dowiemy!