10 Reguły typograficzne w sieci Web Każdy projektant powinien wiedzieć
Gdy ktoś odwiedza zaprojektowaną przez Ciebie stronę internetową, szanse są takie, że nie interesują ją kolory, obrazy i dźwięki, od razu patrzą na tekst.
Niezależnie od liczby dzwonków i gwizdków, które wbudowałeś w stronę internetową, wszyscy polegają na tekście, aby wykonać to, co odwiedzają na stronie .
Już samo to powinno uczynić typografię, sztukę aranżowania typu, priorytetem każdego projektanta stron internetowych.
W tym artykule przyjrzymy się 10 łatwym regułom, o których należy pamiętać podczas projektowania kolejnego projektu internetowego.
1. Przeczytaj sam tekst
Z takim projektem jak JonesingFor projektant bez większego zrozumienia tekstu musiałby zmagać się z typografią, która sprawia, że ta strona naprawdę działa. Gdy zajmiesz się własną typografią, prawdopodobnie nie musisz się martwić pisaniem tekstu witryny - ale musisz to przeczytać!
Niektórzy projektanci stron internetowych uważają, że samo kopiowanie i wklejanie z pliku tekstowego stanowi sumę ich tekstowych obowiązków. Jednak przeczytanie tego tekstu zapewnia przynajmniej podstawową koncepcję tego, w jaki sposób tekst można zintegrować ze stroną internetową, unikając rozłączenia między pisaniem a projektowaniem strony internetowej.
Możesz wykopać swoją typografię w jeszcze innym miejscu, jeśli potrafisz czytać tekst, gdy jest już na miejscu w twoim projekcie. Zwróć szczególną uwagę na przestrzeń wokół liter . Czy masz jakieś wyjątkowo duże przestrzenie, które wyglądają dziwnie? Trochę ostrożna typografia może wyeliminować te problemy. Możesz również uzyskać ideę linii, która może być zbyt długa, aby łatwo ją odczytać, niezręczne podziały linii i podobne problemy.
2. Zrzuć Lorem ipsum tak szybko, jak to możliwe
Czy myślisz, że mógłbyś zaprojektować Strona internetowa Jezusa Rodrigueza Velasco bez faktycznego tekstu? Strona jest silnie uzależniona od słowa pisanego - i bardzo konkretnych słów. Nawet tekst bryły zwrócił szczególną uwagę na kropkę i inne poprawki, które nie byłyby możliwe w przypadku Lorem ipsum.
O ile tekst Twojej witryny nie jest w rzeczywistości Lorem ipsum, tekst fikcyjny nie będzie nosił żadnego podobieństwa do prawdziwego . Oznacza to, że wszelkie poprawki, które możesz wprowadzić w tekście - lub w otaczającym je projekcie - będą musiały poczekać, aż otrzymasz prawdziwą wiadomość. Prośba o (i uzyskanie) tekstu od klienta tak szybko, jak to tylko możliwe, pozwoli ci dopasować swój ogólny wygląd i typografię.
3. Pokaż przejrzystą hierarchię
Po przyjeździe Rik Cat Industries , od razu wiesz, gdzie powinieneś zacząć czytać. Mimo że na górze strony znajduje się kilka linków, powitanie Rika zwraca na ciebie uwagę. Jest o wiele większy, używając typografii do ustalenia jasnej hierarchii .
Każda strona potrzebuje dobrze rozwiniętej hierarchii: wskaźników, gdzie zacząć czytać i jak postępować. Twoja typografia może zapewnić taką hierarchię - tak jak Rik - tak długo, jak długo znasz swoją hierarchiczną kolejność. Myśląc o rozmiarze i krojach czcionek, możesz wyróżnić kawałek tekstu jako nagłówek w taki sposób, że nie można zapewnić innego miejsca w projekcie.
Hierarchia twojego projektu wykracza poza samą typografię, którą stosujesz, ale ponieważ użytkownicy prawie zawsze zaczynają od tekstu, ma to sens dla projektantów, którzy robią to samo.
4. Zwróć uwagę na typografię makro i mikro
Opierając się całkowicie na typografii na ich pierwszej stronie, Crowley Webb and Associate's Strona internetowa została zaprojektowana z myślą o dwóch rzeczach: typografii makro i mikro .
Typografia makr to ogólna struktura Twojego typu, jak wygląda w kontekście Twojego projektu i jego estetyki, gdy sam traktujesz tekst jako blok.
Mikro typografia bardziej interesuje się szczegółami odstępów, problemami, które określają, czy słowa są łatwe do odczytania. Mikro typografia jest absolutną koniecznością, jeśli chodzi o zestawienie bloku tekstu: jeśli nie jest czytelny, nie ma sensu kontynuować. Crowley Webb and Associates odpowiedział na to pytanie, starannie pisząc i rozdzielając te słowa, które strona podkreśli.
Makro-typografia zapewnia jednak możliwość nadania tekstowi więcej niż dobrze rozmieszczonych elementów: jest to szansa, aby wyglądała atrakcyjnie i była częścią całego projektu . Wybór krojów i kolorów na tej stronie tworzy realną całość. Zignorowanie któregokolwiek aspektu typografii jest szkodliwe.
5. Zachowaj ostrożność w kolorach typowych
Tak łatwo byłoby stracić tekst w tle ArtofElan , zwłaszcza jaskrawoczerwona na ciemnoczerwoną kombinację użytą przez projektanta. Kiedy projektant stron internetowych pracuje z kolorowym typem, opieka jest absolutnie konieczna, nie ma gwarancji, że będzie widoczna kombinacja czerwień na czerwono, a nawet kolor żółty na czerwonym . W końcu każdy odwiedził stronę internetową, na której tekst wydawał się być tylko jednym odcieniem od koloru tła i dostał przypadek zmęczenia oczu, gdy próbowali go przeczytać.
Najłatwiejszą poprawką w tej sytuacji jest upewnienie się, że kolor twojego drastycznie różni się od koloru twojego tła . Czarno-białe działają tak dobrze, ponieważ są tak drastycznie różne, jak to tylko możliwe, ale są też kombinacje kolorów, które działają dobrze: coś w rodzaju ciemnoniebieskiego na jasnoróżowym stanie się robotą. Odwrócony tekst jest dość skomplikowany ... podczas gdy możesz pracować z jasnoróżowym tekstem na ciemnoniebieskim tle, możesz złożyć skargę na ten temat.
6. Poważnie traktuj swoje CSS
Jeśli Twój CSS jest solidny, możesz bezproblemowo przechodzić między stronami swojej witryny, tak jak różne wersje Hutchouse.com polegać na różnych arkuszach stylów, aby uzyskać imponujące efekty. Nawet jeśli nie zajmiesz się tak daleko, jak Hutchhouse, CSS może pomóc wyeliminować amatorskie problemy z typografią, takie jak zmiana krojów i rozmiarów między stronami.
CSS może zapewnić łatwą spójność pomiędzy typografią całej witryny . Jeśli jesteś konsekwentny w posługiwaniu się typem, łamanie tej spójności nawet niewielkiej ilości może sprawić, że cokolwiek chcesz podkreślić, naprawdę się wyróżnia, podobnie jak ustalenie, a następnie rozbicie siatki może sprawić, że projekt będzie efektywny. W typografii internetowej utrzymanie spójności czcionek może być prostą sprawą CSS.
7. Porzuć wyśrodkowany tekst
Wybranie alternatywy dla tekstu wyśrodkowanego może sprawić, że projekt strony internetowej będzie czytelny , tak jak DesignCanChange.org . Optymalizowanie tekstu wyśrodkowanego, zwłaszcza na stronie takiej jak ta, spowodowałoby problematyczne strony: wyśrodkowanie krawędzi na środku kadru sprawia, że czytanie jest trudniejsze i istnieje wiele możliwości perfekcyjnego wyśrodkowania tekstu, który zniekształca resztę Twoje projekty na różnych wyświetlaczach.
W niektórych kręgach wyśrodkowany typ jest tylko o jeden stopień wyższy niż użycie Comic Sans w projekcie strony internetowej. Możesz wziąć pod uwagę nagłówek, ale generalnie wyrównanie tekstu w lewo sprawi, że czytelnicy będą znacznie bardziej wygodnie, chyba że czytają od prawej do lewej .
8. Zajmij się inteligentnymi cytatami i innymi symbolami
Luigi Ottani's strona pokazuje, na co zwracać uwagę na cudzysłów i inne symbole: kompletny brak problemów, gdy strona wyświetla te symbole. Wiele witryn internetowych jest usianych symbolami, których przeglądarka nie może wyświetlić. Jest to spuścizna faktu, że większość tekstu, z którym pracuje projektant stron internetowych, była prawdopodobnie napisana w Microsoft Word lub innym edytorze tekstu, który dokonuje wielu drobnych zmian w tekście bez zwracania uwagi przez autora.
Jedną z najgorszych zmian są inteligentne cytaty: kręcone cytaty Word automatycznie zastępuje proste cudzysłowy . Kolejny obszar problemowy pojawia się, gdy pracujesz z tekstem napisanym w innym języku: akcenty i umlaty mogą powodować tyle samo kłopotów, co pomoc Worda. Jeśli po prostu skopiujesz i wkleisz tekst z takimi zmianami do swojego projektu, najprawdopodobniej będziesz musiał wrócić i poprawić je później, przynajmniej w przypadku niektórych przeglądarek internetowych.
Zamiast tego, weź je na początku procesu projektowania, abyś mógł skupić się na lepszym dopasowywaniu tekstu do swojego projektu . Jeśli chcesz, aby te fantazyjne symbole i inteligentne cytaty pojawiały się w ostatecznym projekcie, wyłamuj swoje encje HTML.
9. Zaplanuj, aby Twój tekst był większy
Po zwiększeniu rozmiaru tekstu Veerle Pieters ' stronie internetowej, nie jest tak ładna, jak w przypadku wyboru rozmiaru czcionki, który wybrała. Jednak nadal możesz przeczytać wszystko, znaleźć linki i tak dalej, co jest prawdą w przypadku niewielu stron internetowych.
Dzieje się tak, ponieważ po części wielu projektantów dba o to, aby tekst był układany czcionką 10-punktową lub nawet mniejszą. Większość ludzi czuje się komfortowo czytając takie czcionki, ale Baby Boomers stanowią ogromną część populacji przeglądających strony internetowe i wiele z tych starzejących się internautów będzie mieć ustawione przeglądarki tak, aby wyświetlały typ tak duży, jak tylko mogą . Twój tekst, a także twój projekt, musi być w stanie dostosować się do tego faktu.
Warto również wziąć pod uwagę fakt, że rozmiar przeglądarki może się znacznie różnić , przenosząc tekst do nieoczekiwanych lokalizacji, jeśli nie jesteś ostrożny. Jeśli zwiększanie rozmiaru punktu stwarza problemy, starsza grupa demograficzna będzie się szybko spieszyć do następnej strony internetowej. Konieczność przewijania na zawsze na boki będzie miała podobny skutek.
10. Pokaż preferencję dla sans serif
Jeśli spojrzeć na Lista Apartów strona internetowa, prawie każdy duży blok tekstu jest ustawiony w kroju pisma bezszeryfowego, co znacznie ułatwia czytanie. Nagłówki i inne mniejsze bloki tekstu są ułożone czcionkami serifed, tworząc równowagę między nimi.
Jeśli chodzi o układanie tekstu na ekranie, czcionki bezszeryfowe sans prawie zawsze są najlepszym wyborem , szczególnie jeśli wybrałeś czcionkę taką jak Verdana, która została zaprojektowana do wyświetlania na ekranie komputera. Czcionki z czcionką Serifed mają większe szanse na wyświetlanie słabo, stają się niewyraźne, a nawet pikselowane.
Oczywiście nie da się całkowicie uniknąć szeryfów. Ale w przypadku dużych bloków tekstu, szczególnie użycie czcionki bez szeryfów może zapewnić dodatkowy poziom gwarancji, że użytkownicy będą mogli łatwo przeczytać tekst strony. Kiedy wybierasz czcionki do projektu, najpierw przejrzyj opcje bezszeryfowe .
Ostatni komentarz
Typografia jest łatwo przeoczyć, a nawet jeśli projektant bierze to pod uwagę, łatwo jest odpisać jako czasochłonną aktywność z niewielkim zwrotem. Ale spędzanie nawet kilku minut z tekstem, który będzie głównym elementem projektu, może przekształcić go z czegoś, co każdy projektant stron internetowych mógłby uderzyć na stronę do elementu, który obsługuje resztę projektu.
Napisany wyłącznie dla WDD w czwartek Bram.
Czy stosujesz się do tych zasad i innych? Podziel się swoimi poglądami poniżej ...