5 prostych sposobów na ulepszenie typografii sieci
Typ jest jednym z najczęściej używanych elementów sieci. Pomyśl o tym. Jeśli nie jesteś YouTube'em lub Flickr'em, istnieje szansa, że użytkownicy odwiedzą Twoją zawartość tekstową - a nie fantazyjne opakowanie, które ją otacza. Dlaczego zatem projektanci stron internetowych nadal traktują tekst jako element drugorzędny?
Dobra typografia wprowadza porządek na stronie i zwiększa czytelność . Pozwala to szybciej przetwarzać informacje.
Bardziej czytelna, czytelna strona oznacza zadowolonych użytkowników. Szczęśliwi goście często wracają, kupują produkty, zostawiają komentarze i udostępniają witrynę znajomym. Zobacz, dlaczego warto się zastanowić?
Mógłbym bez końca mówić o tym, jak daleko w Internecie pojawiła się typografia i jak daleko jeszcze musi iść. Często podskakiwałem między siecią i projektem drukowania. Kiedy przechodzisz z InDesign do TextMate, ograniczenia typu web są krystalicznie czyste .
Ale dużo mówiono o tym, jakiego typu sieci nie można zrobić. To nie będzie kolejna rantka. Zamiast tego skupmy się na pięciu łatwych rozwiązaniach dla typograficznych wizji, które obfitują w sieci.
1. Użyj A Resetuj arkusz stylów
Głupie, ale prawdziwe: Żadna z dwóch przeglądarek nie używa tych samych ustawień prezentacji. Różnice w dopełnieniu, marginesach, nagłówkach i wcięciach są nieokiełznane. Jeśli chcesz, aby układ strony był bardziej spójny w różnych przeglądarkach, warto zacząć od arkusza stylów Reset CSS.
Dwa polecam:
Arkusz stylów resetowania CSS Yahoo
Eric Meyer's CSS Reset Stylesheet
2. Obserwuj swój środek
Miara odnosi się do długości pojedynczej linii typu. Dłuższa linia = dłuższy pomiar. Badania wykazały, że dla optymalnej czytelności kolumny tekstu, takie jak Twoja główna treść, powinny zawierać od 45 do 75 znaków (30-50 znaków), w tym spacje . Jest to jeden z powodów, dla których projekty płynów (takie, w których kolumny rozszerzają się i kurczą, aby dopasować szerokość przeglądarki) są trudniejsze dla oczu.
Dodatkowo Twoja przewaga powinna wzrosnąć wraz z długością Twojego Miara . Wiodąca jest ilością białego odstępu między wierszami tekstu i jest kontrolowana za pomocą właściwości CSS linii wysokości. Jeśli chcesz użyć bardzo długiej miary, upewnij się, że Twój lider otwiera się.
Podobnie, jeśli masz małą kolumnę, taką jak pasek boczny z krótką miarą, twój przewijanie powinno być mocniejsze. Domyślna wartość, którą przypisuje większość przeglądarek, jest trochę za ciasna. Wysokość linii około 1,4em działa dobrze dla większości treści ciała.
3. Zmierz się w przestrzeń między
Nie chodzi tylko o twój tekst - chodzi o przestrzeń, która go otacza. Zbyt mało miejsca sprawia, że tekst jest trudny do odczytania, ale zbyt wiele. Kluczem jest znalezienie prostej równowagi, która prowadzi wzrok od jednego elementu do drugiego.
Jednym z najczęstszych błędów popełnianych przez nowych projektantów jest wypełnienie każdego centymetra przestrzeni. Biała przestrzeń odnosi się do pustej lub "negatywnej" przestrzeni wokół twoich treści i ma kluczowe znaczenie. Zapoznaj się z dobrze zaprojektowanym magazynem, takim jak Dwell lub Good, a zobaczysz, że nawet jeśli wydawanie pieniędzy na drukowanie każdej strony kosztuje wydawcę, pozostawia wokół tekstu dużą ilość białego miejsca. Strona będzie w równowadze, a twoje oko będzie efektywnie przenosić się z kosmosu w przestrzeń.
Oprócz dostosowania wysokości linii (jak wspomniano w punkcie 1), spróbuj zwiększyć margines i dopełnienie . Jeśli nie próbujesz przyciągnąć szalonej wizualnej sztuczki, zawsze wokół tekstu powinien znajdować się spory kawałek białego odstępu. Nie pozwól, aby uderzyło ono o inne elementy, w szczególności obrazy. Pozwól, aby twoje fragmenty treści (nagłówki, akapity, paski boczne itp.) Odetchnęły.
Mark Boulton napisał bardzo pouczający artykuł na temat Biała przestrzeń dla Lista Apart, sprawdź to.
4. Do not Go Font Crazy
Dobrą zasadą dla każdego projektanta jest: użyj nie więcej niż dwóch czcionek twarze w twoim projekcie. Dwie twarze czcionek mogą wyglądać bardzo stylowo. Lista Apart wykorzystuje wariacje Gruzji i Verdany, aby stworzyć elegancki i dopracowany wygląd. Jednak dalsze dodawanie czcionek do interfejsu powoduje niepotrzebne zamieszanie. Podobnie, unikaj używania zbyt wielu rozmiarów, kolorów lub zabiegów na stronie lub w akapicie albo będą one konkurować ze sobą zamiast dodawać naciski zgodnie z przeznaczeniem.
Mimo że stosy czcionek i technologie takie jak sIFR i Typeface.js Pozwól, abyś określił tylko jakąkolwiek czcionkę, która ma być domyślna, oprzyj się pokusie, by szaleć z kopią ciała. Czcionki ozdobne najlepiej trzymać w nagłówkach, ponieważ mają one wpływ na czytelność. Pomyśl o tym - kiedy po raz ostatni wziąłeś powieść w miękkiej okładce w całości w komiksie Sans?
Podczas tworzenia stosów czcionek należy zwracać uwagę na rozmiar parowania. Niektóre czcionki wyglądają podobnie w różnych rozmiarach. Verdana i Arial są tego świetnym przykładem. Typetester to świetne narzędzie do porównywania podstawowych czcionek internetowych i tworzenia udanego stosu. Kolejne przydatne narzędzie o nazwie Font Stack Builder pokazuje, jaki procent użytkowników zobaczy każdą odmianę.
Niezależnie od tego, jakich czcionek zdecydujesz się użyć, upewnij się, że nie są one malutkie. Wiem, że jest twardy ... mały tekst wygląda fajnie. Ale pomyśl o biednych, mrużących użytkowników! Zachowaj tekst powyżej 10 lub 12 pikseli. Jeśli nalegasz na malusieńki, przynajmniej używaj względnego rozmiaru dla wszystkich użytkowników IE 6.0, którzy w przeciwnym razie nie mogliby go powiększyć. Czytać Artykuł Wilsona Minera w sprawie rozmiarów czcionek, które świetnie sprawdzą się podczas debaty.
5) Nie zaniedbuj szczegółów
Klient dostarczył treści. Dodanie jej do witryny to tylko kwestia kopiowania i wklejania, prawda? Źle, źle, źle. To jest projekt graficzny dla pułapek, które wpadają zbyt często.
Nawet ci z nas, którzy sumiennie dodają tagi nagłówków, formatują każdy akapit i organizują wypunktowane listy z ostrożnością, zapominają o ważnych szczegółach typograficznych. Wielu (w tym ja) straciło formalne wykształcenie typograficzne, więc nie możesz nas całkowicie winić. Ale diabeł tkwi w szczegółach. Czas, abyśmy przyjęli te podstawy:
Użyj inteligentnych ofert
Jaka jest różnica między inteligentnymi cytatami a niemymi cytatami? Inteligentne cytaty (zwane też książkami lub kręconymi ) są zakrzywione i mają styl otwierania i zamykania. Głupie ( proste ) cytaty są zwykle prosto w górę iw dół. Apostrof jest typograficznie tylko pojedynczym cytatem, więc ten sam problem dotyczy. Głupi cytat (zwany również prime ) powinien być stosowany tylko między pomiarami. Na przykład 6'4 "wykorzystuje podwójne i pojedyncze liczby pierwsze.
Niestety nasze klawiatury domyślnie stosują się do kwotowań bezpośrednich. Microsoft Word i inne edytory tekstu poprawiają je dla nas podczas pisania. Dodawanie inteligentnych cudzysłowów do stron HTML wymaga więcej pracy od programisty stron internetowych, ponieważ musisz używać znaczników do tworzenia otwierających i zamykających symboli cudzysłowu. Ten sam problem występuje z symbolami em i en-dashes, ellipsis, trademark i copyright. Kodery ułatwiają sobie pracę, zastępując je łącznikami, wieloma kropkami, dużą TM i osławioną (C). Używanie właściwych symboli robi różnicę wizualnie. Zrób to dobrze i spraw, by redaktorzy wszędzie się uśmiechali.
Jak tworzyć inteligentne cytaty:
#8216; = otwarcie pojedynczego cudzysłowu
’ = zamykanie pojedynczego cudzysłowu
“ = otwarcie podwójnego cudzysłowu
” = zamykanie podwójnego cudzysłowu
Wiem - nikt nie chce spędzić całego dnia na polowaniu na cytaty. Na szczęście narzędzia takie jak Mądrala i Tekstyzm może wykonać dla ciebie wiele zadań, automatycznie formatując tekst zawierający inteligentne cytaty i tym podobne.
Czytać "Kłopoty z EM i EN" od A List Apart po więcej szczegółów na temat i kodowanie znaków UTF-8 dla większości popularnych znaków specjalnych.
Jedno zastrzeżenie - wiele edytorów tekstu CMS (takich jak ten, z którego korzysta ta witryna) nie pozwala na wdrożenie inteligentnych ofert bez dodatkowych wtyczek. Smutne ale prawdziwe.
Przestań wstawiać dwie spacje po kropce. Proszę! Nie jest to konieczne i jest dość denerwujące.
W linkach użyj obramowania u dołu: bryła 1 piksel zamiast dekoracji tekstowej: podkreślenie . Podkreślenia mogą przebiegać przez znaki odstępu (g, j, p, q, y), co sprawia, że są one trudne do odczytania, szczególnie przy użyciu mniejszych rozmiarów czcionek.
I choć nie ma to nic wspólnego z typografią, szybka kontrola pisowni nigdy nikogo nie zabiła . Nawet jeśli skopiowałeś i wkleiłeś wszystko, błąd pisowni, który przechodzi do witryny na żywo, źle odzwierciedla wszystkich zaangażowanych.
Zwróć uwagę na te 5 poprawek, a projekty witryn z pewnością poprawią się. Pamiętaj, że to tylko punkt wyjścia. Dobra typografia to wyuczona umiejętność, tak jak wszystko inne, wymaga ona nauki i praktyki . Zawsze miej oko na strony, które robią to dobrze i zwróć uwagę na to, co robią. Potrzebujesz inspiracji? Zapoznaj się z poniższymi stronami, gdzie znajdziesz przykłady wspaniałej typografii internetowej i przykładów postów, które uważasz za inspirujące.
Inspirational Type:
Napisany specjalnie dla WDD przez Mindy Wagner.
Co sądzisz o tych prostych sposobach na ulepszenie swojej typografii? Czy wdrażasz je na swoich stronach internetowych? Chcielibyśmy usłyszeć od ciebie!