Zrozumienie Typografii Pisanie dla Sieci
W Web Design temat typografii jest ważny przy rozważaniu wszystkich obszarów doświadczenia użytkownika. Każda strona internetowa potrzebuje tekstu, a istnieją wskazówki, których możesz przestrzegać, aby tworzyć wyjątkowo oszałamiające układy. Linie siatki, napisy, wysokość czcionki, odstępy między tekstami, schematy kolorów i inne podobne właściwości powinny być brane pod uwagę.
W tym artykule chciałbym zagłębić się w dziedzinę typografii internetowej. Przyjrzymy się popularne pomysły na tworzenie wiarygodnych tekstów stron internetowych. Po drodze przedstawię kilka pomocne właściwości CSS3 projektanci często zapominają.
Starałem się położyć większy nacisk na teorię i ideologie dla sieci. Daje to szersze spojrzenie na tekst cyfrowy w ogólności, a ty, projektant stron internetowych, możesz wybrać, które style zastosować do jakich celów. Kontekst jest zawsze kluczowy i musisz to określić odpowiednio dla każdego projektu, nad którym pracujesz. Zastanów się nad tym przewodnikiem jako pakietem referencyjnym, pełnym nowoczesnych trendów internetowych od innowatorów typograficznych na całym świecie.
Zmierz swoje akapity
Do tego rodzaju pomiarów nie trzeba wyjmować kijka. W rzeczywistości miara w odniesieniu do typografii odnosi się do szerokości (poziomo) dowolnego danego akapitu na stronie. Nie jest to temat zawsze omawiany, ale wpływa na czytelność treści. Jako ogólną zasadę należy ograniczyć dowolną pojedynczą linię o długości 75–85 znaków (niekoniecznie ze spacjami).
Dla niektórych szerszych układów może to wydawać się nieco rozciągnięte. Zwłaszcza, jeśli twój projekt jest płynny i ma się dostosować, gdy użytkownik zmienia rozmiar okna przeglądarki. Zawsze możesz ustawić CSS max-width właściwość na głównej zawartości div. Marginesy kodowania i rozmiary czcionek w skalowalnych jednostkach (procentach, ems), a nie pikselach, pozwolą na taką elastyczność w dowolnym układzie.
Nie ma maksymalnej jednostki miary, na którą należy uważać. Sposób pisania treści i formułowania słów w zdania jest znacznie ważniejszy niż szerokość każdej linii. Należy jednak pamiętać, że dłuższe zdania są znacznie trudniejsze do odczytania w porównaniu z krótszymi, zwięzłymi stwierdzeniami.
Wyjaśnienie wiodące
Podczas projektowania wraz z miarą akapitu powinieneś także wziąć pod uwagę pomysł prowadzący. Słowo jest wymawiane “ledding”, takie jak ołów używany w ołówkach. Nazwa ta wywodzi się ze starszych dni mechanicznego składu, w którym paski ołowiu zostały umieszczone między liniami tekstu.
Wiodący jest nadal bardzo ważnym pojęciem w projektowaniu stron internetowych i idzie w parze z miarami akapitowymi. Wraz ze wzrostem szerokości akapitu powinieneś zastosować równy wzrost ilości prowadzących lub odstęp między wierszami tekstu. Ta dodatkowa przestrzeń znacznie ułatwia czytanie.
Jeśli przejdziesz przez bardzo ciasno zraniony tekst, może być trudno skupić się na jednej linii. Jeśli tak jest, spróbuj zwiększyć ilość prowadzących za pomocą CSS Wysokość linii własność. Zawsze chcesz więcej miejsca między liniami tekstu niż między słowami. W przeciwnym razie twoje bloki tekstowe mogą pojawić się jako wydruk gazetowy i nie będą bardzo przyjazne dla użytkownika.
Solidną techniką jest zastosowanie większej przestrzeni niż pierwotnie potrzebna i zmniejszenie jej w razie potrzeby. Nie cały tekst jest tworzony tak samo, a na pewno będziesz potrzebował paragrafów o innym wewnętrznym formatowaniu, takich jak pogrubione słowa, linki kotwiczne, podkreślenia itp. Z dodatkowymi wiodącymi zmianami te zmiany nie będą tak zbalansowane w porównaniu z innym tekstem.
Użyj naturalnych rozmiarów czcionek
Nadal jest kilka stron internetowych, które wybierają rozmiary mniejszych niż przeciętne czcionek. 11px-12px może wydawać się znacznie więcej “standardowy profesjonalista” dla układów biznesowych. Ale te rozmiary nie pomagają większości użytkowników, którzy szukają konkretnych informacji.
Zazwyczaj przeglądarki internetowe mają domyślnie 16px, jeśli nie stosujesz żadnych reguł CSS. Nawet to można uznać za nieco małe, jeśli masz dodatkowy pokój w swoim układzie, aby pomieścić większy tekst. Większe rozmiary czcionek wyglądają po prostu ładniej i znacznie łatwiej je przeglądać dla względnych słów kluczowych. Czcionki Serif nie są często wybierane jako materiał akapitowy, ale nadal można im uciec. Sugeruję użycie znacznie większych rozmiarów tekstu dla czcionek szeryfowych, aby poprawić czytelność i przyciągnąć uwagę.
Odpowiadaj na środowisko użytkownika
W trakcie wypróbowywania różnych rodzin czcionek i rozmiarów obszar zawartości będzie musiał zostać odpowiednio dostosowany. Standardową jednostką, którą trzymam, jest ems ponieważ mogą łatwo zmienić rozmiar na podstawie dostępnej przestrzeni i rozdzielczości ekranu. Optymalizuje to wydajność po stronie użytkownika, która jest najważniejsza.
Ale gdy masz tak elastyczną zawartość, to Twój układ jest podatny na błędy. Treść w stopce lub obszarze paska bocznego może być w niektórych przeglądarkach zniekształcona lub wyłączona. Możesz też mieć trudności z ustawieniem zdjęć lub innych form mediów w tekście głównym. Istnieje kilka alternatyw dla używania ems, jeśli potrzebujesz układu o stałym stylu - ale spróbuj obu rozwiązań, aby zobaczyć, który z nich najbardziej Ci się podoba.
Pamiętaj, że stałe szerokości i rozmiary akapitów zablokują wiele ustawień w projekcie. Świetnie nadaje się do treści zawierających wiele stacjonarnych efektów estetycznych - pomyśl o obrazach tła lub wielu dopasowanych widgetach paska bocznego. Jest to również prosty proces tworzenia obszaru zawartości płynu w lewej kolumnie ze stałymi paskami bocznymi po prawej stronie.
Styl oparty na kontekście
Inne naprawdę fajne triki CSS zostały ukryte przed głównym nurtem projektowania. W szczególności istnieją tendencje kopiowane z prac drukarskich, które można zastosować w odpowiednim kontekście.
Wielu projektantów stron internetowych nigdy nawet nie używało własności CSS z wcięciem tekstowym. Podajesz wartość wcięcia pierwszego wiersza dowolnego akapitu, którego dotyczy ta reguła. Jednostki podążają za standardowymi opcjami tekstowymi, takimi jak piksele, punkty, emsy, procenty… Z pewnością nie jest to trend, który można znaleźć w większości blogów. Ale zapewnia ładny rytm strony podczas czytania dużych bloków tekstu.
Istnieje inny typ selektora CSS znany jako pseudo element. Może to dotyczyć określonej części dowolnego selektora treści. CSS3: pierwszy pseudo selektor jest idealny do tworzenia fantazyjnych stylów na ważnych akapitach. Możesz wzbogacić literę otwierającą każdy akapit - podobnie jak w dość bajkowej książce - używając pogrubienia, kursywy, a nawet zmiany kroju pisma. Sprawdź ten piękny przykład droppadów, który zawiera dodatkowy kod CSS, który możesz wykorzystać.
Gra z odstępami między literami
Jestem pewien, że wielu z nas słyszało termin śledzenia wcześniej, ale nigdy nie zdawało sobie sprawy, że jest to ten sam pomysł, co właściwość odstępu między literami CSS. Te dwie koncepcje są jedno w tym samym, związane z drukowaniem i typografią cyfrową. Jednostka odnosi się do przestrzeni między literami w obrębie jednej linii tekstu. To naprawdę fajny efekt, który można zastosować na nagłówkach, a nawet w niektórych mniejszych blokach treści w witrynie.
Ważne jest, aby nie mylić terminów odstępów między literami a kerningiem. Oba są związane z typografią i odległością między literami. Jednak kerning odnosi się szczególnie do odległości między 2 pojedynczymi literami w słowie. Właściwość odstępów między literami będzie miała zastosowanie do cały element tekstu, czy to słowo, akapit, nagłówek czy link kotwicy. Pamiętaj o tym, gdy bawisz się nowymi pomysłami na style.
Często używam kilku pikseli / punktów odstępów między literami w nagłówkach ze wszystkimi wielkimi literami. To dzieli poszczególne postacie z dodatkową przestrzenią, a także wydaje się bardzo zdefiniowane “nagłówek” Popatrz. Ujemne odstępy między literami działają również doskonale we właściwym kontekście. Generalnie trzymam się mniejszych jednostek, może najwyżej -0,03 lub -0,1.
Łączenie i dopasowywanie krojów pisma
Koncepcje projektowania typografii internetowej są z pewnością formą sztuki, nie tyle nauki. Istnieją wskazówki, których możesz przestrzegać, ale nie ma sztywnych zasad, do których jesteś ograniczony. Oznacza to, że masz ogromną swobodę eksperymentowania z miksowaniem i dopasowywaniem różnych czcionek, do których masz dostęp.
Zdecydowanie najpopularniejsza kombinacja krojów pisma obejmuje podział szeryfowy / bezszeryfowy na treść nagłówka i akapitu. Lubię przełączać oba, ale częściej używam czcionek szeryfowych w sekcjach nagłówka. Dodatkowe oznaczenia i kreski na każdej literze sprawiają, że wydają się bardziej pochlebne niż dominujący tekst strony.
Dodatkowo czcionki bezszeryfowe są czystsze i łatwiejsze do zgniecenia w zdaniach. Nie oznacza to, że czcionki szeryfowe nie będą działać w akapitach. W rzeczywistości jest wiele świetnych przykładów! Jednak mało znana koncepcja o nazwie x-height ma zasadnicze znaczenie dla odróżnienia złożoności kroju pisma. Patrząc na linię bazową kilku słów, zobaczysz, jak będą wyglądać takie czcionki “pasować” ze sobą.
Warto również zwrócić uwagę na znaczenie przestrzeni między tymi różnymi elementami. Prawdopodobnie będziesz używał 2 lub 3 różnych stylów nagłówka, więc każdy z nich będzie wyglądał inaczej. Staram się utrzymywać moje elementy h2 / h3 nieco bliżej następnego bloku akapitu, ponieważ oznacza to, że istnieje korelacja między treścią.
Ta korelacja jest szczególnie przydatna, gdy używasz dwóch zupełnie różnych krojów pisma obok siebie. Polecam nie więcej niż 3 różne rodziny czcionek na zestaw treści. Po zbyt wielu dostosowaniach Twoje słowa są pomieszane, a cała strona wygląda jak mieszanka źle skonstruowanych czcionek.
Wniosek
Mam nadzieję, że te koncepcje rzucą nieco światła na skomplikowany temat typografii cyfrowej. Trudno jest naprawdę zaangażować się w pracę jako projektant, zwłaszcza jeśli cały temat jest dla ciebie obcy. Ale kontynuuj naukę i upewnij się, że ćwiczysz całą grupę!
W następnym tygodniu: Bądź na bieżąco, gdy zajrzymy do niektórych pomocne narzędzia i zasoby dla lepszej typografii internetowej.
Więcej…
Oto więcej postów związanych z typografią:
- Prezentacja projektów internetowych z piękną typografią
- Lepsza typografia dla nowoczesnych stron internetowych
- Szybki przewodnik po typografii: naucz się i inspiruj
