Wszystkie elementy publikacji są obliczane na podstawie formatu publikacji. Wybór formatu to osobne zadanie, które opiszę później, ale na razie rozwiążmy to po prostu. Załóżmy, że musimy drukować na drukarce biurowej Rozdawać do prezentacji. Wtedy sensownie jest używać domyślnie papieru „biurowego” A4 z marginesami utworzone przez program Wersja Microsoftu*.

Rozmiar czcionki tekstu głównego naszej publikacji zależy bezpośrednio od rozmiaru strony. A raczej nie z samej strony, ale z paska pisania - miejsca przydzielonego na stronie na tekst.

Nasz główne zadanie wybierz rozmiar czcionki tak, aby tekst był wygodny do odczytania.

Jeśli czcionka jest za mała, czytelnik często „gubi wiersze”: po przeczytaniu wiersza do końca trudno jest znaleźć początek następnego. Linie pisane małą czcionką wydają nam się dłuższe, bo zawierają więcej słów. Jeśli widzisz osobę przesuwającą palcem po tekście lub przesuwającą linijkę po stronie, oznacza to, że tekst jest za mały, aby zmieścić się na tym pasku.

Przy zbyt dużej czcionce, wręcz przeciwnie, linie ulegają skróceniu, wzrok biegnie po kartce jak promień słońca na przeciwległej ścianie – takie czytanie też jest męczące. Jeśli zastosujesz justowanie formatu, odległości między słowami będą nierówne, a nawet mogą pojawić się zupełnie nieprzyzwoite dziury. Czytanie takiego tekstu porównałabym do chodzenia po podkładach, kiedy ciągle tracisz krok.

Jak już zapewne się domyślacie, nie może być szpilki za małej ani za dużej. Czy jest za mały czy za duży dla danego pasma wybierania. To, co nie nadaje się na stronę A4, całkiem nadaje się na broszurę A6.

1. Optymalna długość linii to 1,5–2 linie zawierające wszystkie małe litery alfabetu.
2. Wiersz o optymalnej długości powinien zawierać 9–10 słów, składających się średnio z 5 liter każde.
3. Minimalna długość linii to 27 znaków, optymalna to 40 znaków, a maksymalna to 70.
4. Długość kolumny w plikach Pica powinna być maksymalnie trzykrotna w stosunku do rozmiaru czcionki w punktach.

Ostatnia metoda może wydawać się skomplikowana, jednak według Feliciego jest to metoda obliczeń, którą preferuje od wszystkich innych. W praktyce wygląda to tak. Jeśli główny rozmiar czcionki wynosi 10 punktów, to maksymalna długość kolumny - 30 zdj. Idealny stosunek to 2:1 lub 2,5:1, tj. idealna kolumna to 2–2,5 pików dla zestawu 10-punktowego.

Główny wniosek: im dłuższe linie, tym większa powinna być czcionka.

Podane powyżej zasady formalne zostały sprawdzone w czasie i sprawdzają się świetnie. Jednak podążając za nimi, bardziej ufaj swoim oczom. Wykonaj kilka wydruków za pomocą inny tekst i uważnie przyjrzyj się wynikowi.

Wybierając rozmiar czcionki, należy wziąć pod uwagę, na jakim papierze zostanie wydrukowany tekst. W przypadku słabego, białawego papieru może być konieczna większa czcionka tekstu podstawowego. Swoją drogą o wyborze samej czcionki powinna decydować także jakość papieru i szereg innych czynników, o których opowiem następnym razem.

*Istnieją zasady obliczania pól, ale napiszę o tym specjalną notatkę.

Jest - komponent tekstowy, tj. użytkownik musi czytać, czytać i jeszcze raz czytać. Według statystyk w Internecie prawie nikt nie czyta całego artykułu, wszyscy przeglądają i starają się uchwycić tylko główną myśl, ponieważ artykuły z reguły są pełne „wody”. Celem webmastera jest zapewnienie użytkownikowi jak największego komfortu czytania. W tym artykule dowiesz się nie tylko o wyborze czcionki, ale także o tym, jak najlepiej rozmieścić treść na stronie.

Jakie są kryteria wyboru czcionki na stronę internetową? Poniżej wymieniłem główne kryteria i zalecenia dla każdego z nich.

1. Wybór rodziny czcionek

Istnieje niezliczona ilość czcionek, wiele z nich jest do siebie podobnych, niemniej jednak każda z nich ma swoją własną cechy charakterystyczne. Jednak nie wszystkie przeglądarki mają każdy z nich. Poniżej znajduje się mała lista najpopularniejszych czcionek dostępnych w każdej przeglądarce:

• Arial ;
• Verdana;
• Czcionka Times New Roman;
• Gruzja ;
• Trebuchet MS;

Jeśli jesteś zadowolony z dowolnej czcionki z tej listy, to tak będzie najlepsza opcja, bo wtedy nie musisz się martwić o załadowanie go specjalnie do przeglądarki użytkownika. Jeśli nadal chcesz jakąś rzadką czcionkę, możesz to zrobić na kilka sposobów (ale od razu mówię, że lepiej nie stwarzać sobie problemów!).

Na przykład możesz wybrać kilka piękna czcionka na Google Font, ale aby wybrana czcionka pojawiła się w przeglądarce, użytkownicy będą musieli ją podłączyć. W rezultacie czcionka będzie za każdym razem ładowana z czcionki Google, co moim zdaniem jest złe i jest ku temu wiele dobrych powodów:

Po pierwsze, istnieje zależność od innych witryn (w w tym przypadku z Google). Na przykład Google może z jakiegoś powodu działać wolno i w tym przypadku Twoja witryna również ulegnie spowolnieniu. Przykładów nie trzeba szukać daleko. Osobiście załadowałem skrypt do pracy z biblioteką AJAX (jquery) ze strony Google, ale okresowo nie ładował się w ogóle i to doprowadziło do nieprawidłowe działanie całą witrynę.

Rozwiązanie problemu było proste: po prostu skopiowałem cały plik .js na mój hosting i przesłałem go ze swojej witryny. Najlepiej, gdy cała witryna jest ładowana z własnego hostingu. Nie będziesz jednak mógł przenieść czcionek na swoją stronę internetową; zawsze będziesz musiał je pobrać ze strony Google.

Po drugie, w przeglądarkach takich jak Opera, w oczach użytkownika wszystko będzie wyglądało tak: wchodzi na Twoją stronę, treść już się pojawiła i po jakichś pół sekundzie - bum i czcionka się zmieniła. Nastąpi to, gdy tylko przeglądarka pobierze go z Google i przetworzy. W przypadku poważnych zasobów to „migotanie” stylów tekstu jest niedopuszczalne. Oczywiście nie na wszystkich przeglądarkach taka sytuacja występuje, ale osobiście wystarczy mi nawet jedna opera, aby zrezygnować z używania mniej popularnych czcionek.

Wróćmy do rodzin czcionek. Najlepszą i najbardziej wszechstronną czcionką jest Verdana. Ta strona ma właśnie taką czcionkę. Nie ma w nim zawijasów, jest ścisły i czytelny, czyli dokładnie to, czego potrzebuje użytkownik, aby szybko uzyskać informację.

2. Wybór rozmiaru czcionki

Wybór rozmiaru czcionki jest wymagające zadanie, ponieważ niektórzy lubią mniejsze czcionki, a inni większe. Osobiście wybrałem dla siebie rozmiar 14 pikseli. Rozmiar ten jest standardem w wielu dziedzinach (na przykład ten rozmiar jest używany podczas pisania dyplomów i zajęć zgodnie z GOST). Na tej stronie nie ma potrzeby stosowania czcionki o rozmiarze 14 lub większym, nie ma też potrzeby jej zmniejszania. Pamiętaj, że najważniejsze jest to, aby użytkownicy mieli komfort czytania.

Notatka

Często ten sam rozmiar różne czcionki ma absolutnie różne rozmiary wysokości i dlatego wizualnie reprodukowane w różny sposób. Dlatego lepiej przetestować, jak wszystko wygląda, a nie zawracać sobie głowę konkretną liczbą 14.

3. Wybór koloru czcionki i tła

Niezależnie od tego, jak dobry jest kolor i tło, czytanie tekstu na monitorze jest nadal niewygodne. Jedyne, co można zrobić, to zapewnić jak największy komfort czytania. Uważa się, że czarny tekst na białym tle jest bardzo czytelny, ale jeśli zapytasz o zdanie osoby pracujące na komputerach, powiedzą, że białe tło bardzo jasne i powoduje zmęczenie oczu. Idealne rozwiązanie ma lekko szarawe tło i zawiera czarno-szary tekst. Taki tekst można czytać bardzo długo, nie męcząc oczu. Dobry także na oczy Kolor niebieski czcionka.

Bardzo popularne jest również połączenie czarnego tła i białego tekstu, ale ta kombinacja nie jest odpowiednia dla każdej witryny. Mimo to większość witryn tak ma lekkie projekty. Znalazłem specjalną listę kombinacji czcionek i kolorów tła (w kolejności malejącej czytelności):

• Niebieski na białym;
  Przykład — niebieski na białym
• Czarny na żółtym;
  Przykład — czarny na żółtym
• Zielony na białym;
  Przykład — zielony na białym
• Czarny na białym;
  Przykład — czarno na białym
• Czerwony na żółtym;
  Przykład — czerwony na żółtym
• Czerwony na białym;
  Przykład — kolor czerwony na białym
• Zielony na czerwonym;
  Przykład — zielony na czerwonym
• Pomarańczowy na czarnym;
  Przykład — pomarańczowy na czarnym
• Czarny na fioletowym;
  Przykład — czarny na magentie
• Pomarańczowy na białym;
  Przykład — pomarańcza na białym tle
• Czerwony na zielonym;
  Przykład — kolor czerwony na zielonym

4. Inne drobnostki

Do tych drobiazgów chciałbym zaliczyć:

• Tekst musi być napisany małymi literami, ponieważ... duży rejestr powoduje irytację;
• Wyrównanie czcionek powinno być wyrównane do lewej, ponieważ wszyscy są do tego przyzwyczajeni;
• Treść nie powinna być bardzo rozciągnięta na szerokość, ponieważ użytkownicy są leniwi i jeśli ich oczy będą musiały biegać od lewej do prawej krawędzi monitora, spowoduje to dyskomfort i utratę myśli;
• Czcionka musi być normalna, tj. nie kursywą, nie pogrubioną, nie podkreśloną (zapisz te elementy, aby podkreślić główne myśli w tekście);

Na koniec chcę jeszcze raz powiedzieć, że wybór czcionki i jej projekt są takie same ważny element, a także wybór projektu witryny. Nie angażuj się typowe błędy webmasterów, którzy postanowili się wyróżnić i przez to przegrywają duża liczba użytkownicy, dla których tworzone są witryny.

16 pikseli wynosi optymalny rozmiar czcionka dla stron internetowych.

Na pierwszy rzut oka stwierdzenie to może wydawać się dziwne, a nawet prowokacyjne. Główna czcionka większości stron internetowych nie przekracza 12 pikseli i wielu projektantów stron internetowych jest przekonanych, że jest to optymalny rozmiar czcionki. Ten artykuł ma na celu przekonać Cię, że jest inaczej.

Specjalista ds. użyteczności stron internetowych Oliver Reichenstein twierdzi, że 16 pikseli to standard normalnego wyświetlania czcionek w przeglądarce. Jednocześnie czcionka nie będzie wyglądać na gigantyczną (czego obawia się wielu projektantów), ponieważ 16 pikseli to dużo tylko na pierwszy rzut oka, ale w praktyce jest to najwygodniejszy rozmiar czcionki dla witryny, o czym przekonało się już wielu programistów z.

Co więcej, 16 pikseli to minimalny rozmiar czcionka dla nowoczesnej strony internetowej, a jeśli nie obsługujesz tego formatu, to po prostu marnujesz pieniądze swoich klientów. Poniżej znajdują się argumenty przemawiające za trafnością tego konkretnego rozmiaru czcionki.

Dochody strony internetowej i przyciąganie czytelników

W większości przypadków strona internetowa jest tworzona w celu zarabiania pieniędzy, a im więcej masz odwiedzających, tym większy będzie prawdopodobny dochód. Jeśli Twoja witryna sprzedaje się, tym ważniejsze jest, aby ją przyciągnąć potencjalny klient wśród odbiorców Internetu. Każdy z czytelników Twojej witryny jest cennym aktywem biznesowym, który ostatecznie zwróci koszty stworzenia Twojej witryny.

Dlatego każdy element Twojej witryny powinien być nastawiony na osiągnięcie ostatecznego celu. Treść tekstowa Zasada ta obowiązuje przede wszystkim. W końcu tekst na stronie internetowej jest głównym środkiem oddziaływania na czytelnika.

Jeśli teksty na Twojej stronie nie wskazują jednoznacznie, jakich działań oczekujesz od użytkownika, to nie zostanie on Twoim klientem. A żeby tekst skutecznie oddziaływał na użytkownika, trzeba go przynajmniej przeczytać.

Dlatego wszystko, co robisz, powinno mieć na celu ułatwienie czytelnikom czytania treści.

4 fakty dotyczące czytania, które powinien wiedzieć projektant stron internetowych

1) Po dwudziestu latach jakość widzenia u ludzi spada, w wieku czterdziestu lat tylko 50% światła przechodzi do siatkówki, a do sześćdziesiątki - tylko 20%.

2) 9% Amerykanów ma problemy ze wzrokiem, a w Rosji liczby te są jeszcze niższe. Dla wielu Rosjan nawet soczewki kontaktowe nie są w stanie całkowicie skorygować wzroku.

3) Szybkość odczytu zależy od odległości od źródła: Im większa odległość, tym bardziej czytelne symbole i większa zdolność czytania ze zrozumieniem. Główny czynnik determinujący optymalna odległość, to dokładnie rozmiar czcionki. Duże czcionki na billboardach są widoczne prawie dla każdego, ale czcionki 12-pikselowe na większości stron internetowych już nie.

4) Należy pamiętać, że większość użytkowników komputerów znajduje się w odległości 50-60 centymetrów od urządzenia, co pozwala uniknąć nadmiernego obciążania oczu. Źródła drukowane postrzegamy jednak jako coś więcej bliski zasięg, bo magazyn, który czytamy, znajduje się w odległości mniejszej niż na wyciągnięcie ręki, zaledwie kilkudziesięciu centymetrów. Na podstawie tych obliczeń można zauważyć, że czcionka 16-pikselowa na ekranie jest postrzegana jako czcionka 10-pikselowa w książce.

Tekst 16 pikseli na monitorze 24-calowym i tekst 12 punktów w książce

Tekst 16 pikseli na monitorze 15,4 cala i tekst 12 punktów w książce

Złe czcionki zmniejszają ruch w witrynie

Zła czcionka na stronie internetowej jest najczęstszym problemem użytkowników (uzyskała najwięcej głosów w ankiecie z 2005 roku). NA ten moment sytuacja nie uległa poprawie – pokazuje próbka projektów SiteInspire. Średni rozmiar Rozmiar czcionki tekstu głównego to te same 12 pikseli, które stało się standardem wśród projektantów stron internetowych, wbrew wymaganiom użytkowników, z których większość narzeka na mały rozmiar czcionki. Ze wszystkich tych projektów nie ma ani jednego (!) z czcionką większą niż 14 pikseli, a niektóre mają jeszcze mniejszą czcionkę - 10 px.

Popularne źródła gotowe projekty w przypadku witryny ElegantThemes i ThemeForest oferują twórcom stron internetowych szablony o rozmiarze czcionki nieprzekraczającym 12-13 pikseli.

Ilu Twoich czytelników ma 100% jakości widzenia i nie cierpi na nadmierne zmęczenie oczu podczas pracy z komputerem? Czy wszyscy Twoi czytelnicy mają mniej niż 20 lat i nie mają problemów z rozpoznawaniem miniaturowych czcionek?

Najprawdopodobniej tak nie jest: każdy z dziesięciu czytelników po prostu nie będzie w stanie rozróżnić czcionki 10 pikseli, ale rozmiar 16 pikseli będzie dla nich optymalny. W przeciwnym razie nawet osoby o doskonałym wzroku będą musiały zbliżyć się do monitora, aby zobaczyć drobny druk, co znacznie zmniejsza użyteczność witryny. Postawa osoby siedzącej przed komputerem powinna być jak najbardziej naturalna i wygodna, nie chcesz, aby Twój czytelnik czuł się niekomfortowo i niezręcznie?

Nie obciążaj czytelnika po raz kolejny, w przeciwnym razie znaczenie tego, co przeczyta, do niego nie dotrze (nawet jeśli przeczyta Twój tekst i nie opuści strony od razu).

Nie odstraszaj odwiedzających niewygodnymi czcionkami, ponieważ im więcej masz odwiedzających, tym wyższy dochód ostatecznie przyniesie Twoja witryna.

Nie każ użytkownikowi myśleć!

Wielu projektantów uważa, że ​​„problemy tonących ludzi są dziełem samych topiących się ludzi”, a jeśli użytkownik ma problemy z odczytaniem czcionki na stronie, powinien skorzystać z funkcji powiększania, która pozwala mu powiększyć tekst. Jednak z punktu widzenia użytkownika wyszukiwanie jest łatwiejsze niezbędne informacje na innej stronie niż dostosowywanie niewygodnego interfejsu zasobu internetowego. Wielu użytkowników nawet nie wie o istnieniu takiej funkcji i w obliczu tekstu, którego nie da się odczytać, bez wahania naciskają przycisk „Wstecz”.

Nie marnuj pieniędzy swoich klientów tworząc stronę internetową, która jest w oczywisty sposób nieopłacalna. To, co wydaje Ci się piękne, nie zawsze jest przyjazne dla użytkownika. Pomyśl o tym, co interesuje użytkownika, a osiągniesz cel, jakikolwiek by on nie był.

Projekt publikacji drukowanych różni się od projektu zasobów internetowych – to oczywiste. A jeśli duże czcionki w druku powodują dodatkowe koszty za każdy milimetr użytego papieru, to koszt stworzenia publikacji online nie jest zależny od rozmiaru użytej czcionki, więc nie ma sensu ograniczać się do kompromisowych rozwiązań.

16 pikseli jest wygodne

Jeśli nadal nie dostrzegasz duża czcionka jako akceptowalny dla witryny z estetycznego punktu widzenia, pomyśl o tym, że nie ma nic bardziej elastycznego niż gust projektanta. Zasadniczo nasze preferencje opierają się na tym, co widzieliśmy wcześniej. A jeśli zaimponował Ci projekt strony internetowej wykonany przy użyciu czcionki 10 pikseli, nie zaprzecza to w żaden sposób, że projekt z czcionką 16 pikseli będzie atrakcyjny.

Pomyśl, co jeśli Twój projekt stanie się nowym standardem? Uczynienie witryny bardziej przyjazną dla użytkownika to świetny sposób na pokonanie konkurencji i zbudowanie dużej grupy odbiorców.

5 stycznia 2012 o godzinie 19:05

Opinia: tekst główny w rozmiarze 16 pikseli

• projektowanie stron

Niedawno w ulubionym przez wszystkich SmashingMagazine ukazał się artykuł, w którym autor przedstawia swoją teorię dotyczącą 16 pikseli jako rozmiaru tekstu podstawowego i argumentuje na jej obronę. Artykuł wywołał dość burzliwą dyskusję, dziś publikujemy jego tłumaczenie.

Tłumaczenie dostarczone przez blog poświęcony projektowaniu stron internetowych Naikom

W przypadku tekstu podstawowego wartość mniejsza niż 16 jest strasznym błędem

Wiem, co myślisz: „Czy on właśnie powiedział 16 pikseli? Do tekstu podstawowego? Mnóstwo! 12 pikseli jest idealne dla większości stron internetowych.”
Chciałbym Cię przekonać, że jest inaczej.

Ekspert ds. użyteczności Oliver Reichenstein stwierdził w swoim artykule „Standard 100% Easy-2-Read”:
„16 pikseli to niewiele. Jest to domyślny rozmiar tekstu przeglądarki. Przeglądarki zostały zaprojektowane tak, aby wyświetlać ten rozmiar... Na pierwszy rzut oka wydaje się to dużo, ale gdy spróbujesz, od razu zrozumiesz, dlaczego wszyscy twórcy przeglądarek wybrali ten rozmiar tekstu jako domyślny.

W tym artykule wyjaśnię, dlaczego 16 pikseli to minimalny rozmiar tekstu podstawowego nowoczesny projekt strony internetowej. Jeśli nie zmienisz swojej opinii, prosimy o przedstawienie powodów w komentarzach.

Jak widać, w większości przypadków, jeśli utworzysz witrynę internetową o rozmiarze czcionki od 10 do 15 pikseli, ty marnować pieniądze klienta. I własnie dlatego.

Czytelnicy to dochód

Jeśli tworzysz stronę internetową dla kogoś – nawet dla siebie – prawdopodobnie Twoim celem jest zarabianie pieniędzy.

Może sprzedać produkt bezpośrednio, zaoferować usługę lub po prostu uzyskać kliknięcia. Tak czy inaczej, jest to składnik aktywów biznesowych i powinien ostatecznie zwrócić Twoją inwestycję. Musi generować dochód.
Dlatego każdy element musi być zaprojektowany tak, aby osiągnąć ten cel. Łącznie z tekstem. Zwłaszcza tekst - ponieważ tekst przekonuje odwiedzających do zrobienia tego, co chcesz.
Pomyśl o tym. Jeśli nie wyjaśnisz, co ludzie powinni zrobić i dlaczego powinni to zrobić, to oczywiście tego nie zrobią. Jedynym sposobem, aby im to powiedzieć, jest SMS. A tekst sugeruje czytanie.

Ważne fakty dotyczące czytania

Istnieją pewne fakty, które są decydujące w przypadku takich pytań jak czytelnicy, czytajcie i rozumiejcie, i to wszystko o tekście. Jeśli ludzie tego nie czytają albo nie potrafią przeczytać i zrozumieć, to jaki jest w tym sens, prawda?

Fakt: Większość użytkowników nie znosi „zwykłego” rozmiaru czcionki

Zapytam: jaki procent Twoich czytelników stanowią osoby powyżej 40. roku życia? Ich oczy muszą pracować, aby przeczytać tekst. dwa razy więcej niż oczy 20-latka. Jeśli zbliża się do 60. roku życia, oczy muszą pracować cztery razy ciężej.
Prawie 1 na 10 Twoich czytelników ma problemy z oczami. A nawet ci, którzy nie mają problemów, nadal będą musieli się wysilić czytać tekst mniejszy niż 16 pikseli, nawet jeśli nie zauważają, że to robią. (Jak często czujesz się przyciśnięty bliżej ekranu?). A jeśli dziecko będzie musiało się pochylić, prawdopodobnie poczuje się niezręcznie i niekomfortowo. Naturalna poza przed komputerem – wg co najmniej, na wyciągnięcie ręki od ekranu!
Krótko mówiąc, czytanie jest denerwujące dla przeciętnego użytkownika.
Im trudniej jest przeczytać Twój tekst, tym mniej znaczenia zostanie zrozumiane. 10 pikseli będzie bezużytecznych. 12 pikseli to wciąż za mało dla większości czytelników. Nawet 14 pikseli może zniechęcić gości, którzy w przeciwnym razie zostaliby na miejscu.
Możemy zatem stwierdzić, że jeśli chcesz osiągnąć maksymalny liczbę czytelników, musisz ją ustawić minimum rozmiar 16 pikseli.

„Ale użytkownicy mogą powiększyć tekst”.

„Jeśli kod jest poprawny, osoby z problemami ze wzrokiem zawsze będą mogły skorzystać z funkcji powiększania, aby powiększyć tekst”.- tak powiedział jeden z projektantów stron internetowych w sporze dotyczącym tej kwestii. W rzeczywistości nie jest to prawdą. Użytkownicy, którzy muszą zmienić ustawienia, zwykle nie wiedzą, jak to zrobić. A ci, którzy mogą... najprawdopodobniej wybiorą łatwiejszą ścieżkę, po prostu naciskając przycisk „Wstecz”. Jest rzeczą oczywistą, że nie powinniśmy wykorzystywać pieniędzy naszych klientów do tworzenia projektów nieprzyjaznych dla użytkownika. Nie należy przedkładać naszych osobistych upodobań ponad użyteczność.

Projektowanie stron internetowych to nie tylko coś, co lubią projektanci. Chodzi o to, co użytkownicy chcą i co pomoże Ci osiągnąć cele naszych klientów.

Jeśli celem strony internetowej jest generowanie dochodu, naszą rolą jako projektantów jest wymyślenie czegoś, co pozwoli osiągnąć ten cel tak efektywnie, jak to możliwe. Wybór rozmiaru czcionki utrudniającego czytanie zmniejszy liczbę czytelników, więc nie oszczędzaj na rozmiarze czcionki kosztem konwersji.
W projektowaniu druku czcionka w rozmiarze 8 będzie idealnym kompromisem pomiędzy łatwością czytelności a kosztami, bo za każdy milimetr papieru trzeba płacić. W Internecie nie płacisz nic za korzystanie z Twojej przestrzeni — pod warunkiem, że Twoim czytelnikom podobają się Twoje teksty.
Pytanie brzmi Czy jesteś gotowy wydać pieniądze swoich klientów na coś, co lubisz tylko Ty?

16 pikseli to niewiele

Nasze gusta projektowe i preferencje estetyczne są bardziej elastyczne, niż nam się wydaje. To, co nam się podoba, wynika w dużej mierze z tego, co widzieliśmy już u innych projektantów i czego oczekujemy.
Niestety, większość stron internetowych zawiera drobny tekst, ponieważ ekrany były kiedyś małe, a projektanci nie porzucili jeszcze tego nawyku.
Oryginał tego artykułu jest napisany czcionką o rozmiarze 19 pikseli. Wybrano ten rozmiar, ponieważ nawet 16-18 pikseli wydawało się za małe: jeśli usiądziesz wygodnie na krześle, w odległości 70 cm od ekranu, może się okazać, że będziesz musiał mrużyć oczy, aby zobaczyć tekst. Gdybym użył Gruzji lub Verdany, 16 pikseli mogłoby być w porządku: te czcionki zostały zaprojektowane duży wzrost litery i dlatego wydają się większe na ekranie.

Teraz spójrz na stopkę i zobacz, czy musisz pochylić się do przodu w stronę ekranu, zmrużyć oczy lub skrzywić się, aby zobaczyć tekst. W końcu jego rozmiar to 11 pikseli. Jeśli po tym wszystkim nadal Cię nie przekonałem, proszę o podanie powodów w komentarzach.

Tagi:

• rozmiar czcionki
• typografia

Dodaj tagi

Do zakładek

Uważa się, że tekst odgrywa główną rolę w komunikacji, ponieważ to on informuje użytkownika i dostarcza mu informacji wymagana treść. Nie lekceważ jednak znaczenia typografii: dobra czcionka ułatwia czytanie, zły wręcz przeciwnie utrudnia odbiór tekstu.

Nie ma jednego zestawu zasad, które będą skuteczne przy wyborze czcionki. Istnieje jednak kilka zasad, które pomogą poprawić łatwość czytania urządzenia mobilne Oh.

Funkcje typografii na iOS i Androida

Zanim Uruchomienie iOS 9, czcionką systemu iOS była Helvetica Neue, ale po wydaniu Nowa wersja zostało zastąpione przez San Francisco. Czcionka oferowana jest w dwóch stylach: Display (do stosowania w elementach UI interfejsu i dla tekstów o dużej wielkości punktu) i Text (dla obszerny tekst mniejszy rozmiar).

W podrodzinie Tekst odstępy między literami są większe niż w podrodzinie Wyświetl. Apertury tych czcionek tekstowych są również szersze, aby zapewnić większą czytelność małych punktów. Jedną z cech San Francisco jest to, że jest to czcionka dynamiczna: zmienia styl w zależności od rozmiaru. System automatycznie przełącza czcionkę na Display po jej rozmiarze przekraczającym 20pt.

Android używa jako czcionka systemowa Roboto lub, jeśli język tego nie obsługuje, Noto. Każdy z nich jest zaprezentowany cyrylicą.

Wygląd materiału, który jest używany na urządzeniach z systemem Android, zapewnia duże wcięcia pomiędzy elementami, a także szeroką gamę rozmiarów punktów w celu stworzenia hierarchii.

W iOS w tym celu z reguły nie używa się rozmiaru czcionki, ale jej wagę. Jeśli Roboto ma tylko sześć odmian, to w San Francisco jest ich 15: sześć dla podrodziny Tekst i dziewięć dla podrodziny Display.

W aplikacji możesz używać dowolnej czcionki True Type (.TTF), jednak szczególną uwagę należy zwrócić na zakup licencji. Nawet jeśli czcionka jest bezpłatna, musisz wyjaśnić, czy musisz za nią zapłacić użytek komercyjny. Licencja musi być również zgodna z pierwotnym żądaniem: czcionka zakupiona do interfejsu internetowego nie może być używana w aplikacji mobilnej ani w logo.

W aplikacji powinieneś zadowolić się jednym lub dwoma krojami pisma: jeden dla tekstu głównego, drugi dla nagłówków. Lepiej jednak zainstalować w aplikacji pojedynczą czcionkę. Stosując czcionkę inną niż systemowa należy zwrócić uwagę na jej czytelność, wielkość, długość linii, odstępy między wierszami i literami.

Czytelność

Litery powinny być czytelne i rozpoznawalne – tylko w tym przypadku lepiej sprawdzą się jako element interfejsu. Wiele czcionek bezszeryfowych, w tym Helvetica, jest nieczytelnych Wielka litera I i małe l, więc nie należy ich wybierać dla urządzeń mobilnych.

Source Sans Pro (po lewej) i Helvetica (po prawej)

W Helvetice odczytanie pierwszych trzech liter jest prawie niemożliwe, podczas gdy Source Sans Pro jest łatwy do odczytania. Helvetica nie nadaje się do pracy z interfejsami: czcionka została utworzona w 1957 roku i pierwotnie nie była przeznaczona do użytku na małe ekrany. Dlatego Apple opracowało San Francisco.

Rozmiar czcionki i hierarchia treści

Rozmiar czcionki wpływa na czytelność elementów, szczególnie w przypadku dużych bloków tekstu. Czytanie tekstów o małej wielkości punktu zajmie użytkownikowi więcej czasu, ponieważ w tym przypadku będzie mu trudno znaleźć początek i koniec linii. W rezultacie czytelnik celowo pominie wiele informacji.

Jednak zbyt duża czcionka jest również niewygodna. Ponieważ wiersz jest za krótki, zmuszamy czytelnika do przewrócenia oczami i tym samym zaburzamy jego rytm czytania. W takich warunkach trudniej jest dostrzec informacje. Lepiej jest wykorzystać podstawowe parametry urządzenia, dla którego tworzony jest projekt. Dla iOS jest to 17pt, dla Androida jest to 13sp.

Wybierając podstawowy rozmiar czcionki, należy wziąć pod uwagę ilość treści i zakres jej odbiorców. Jeśli głównymi odbiorcami aplikacji są osoby powyżej 50. roku życia, należy zastosować większą czcionkę np. 21px, gdyż z wiekiem wzrok pogarsza się.

W określeniu wielkości nagłówków i podtytułów pomoże skala typograficzna. Skala klasyczna, w terminologii Roberta Bringhursta, przebiega w następujący sposób: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 i tak dalej. Można jednak zastosować inną gradację (złoty podział lub interwały harmoniczne). Obliczenia wygodnie jest przeprowadzać za pomocą specjalnego kalkulatora na stronie modularscale.com.

Konieczne jest wcześniejsze ustalenie hierarchii treści, aby zgodnie z nią dobrać rozmiary czcionek. Jeśli czcionka podstawowa to 1, nagłówek poziomu H1 to 3em. Napisy i drobny tekst będą o jeden rozmiar mniejsze niż rozmiar podstawowy.

Przykład hierarchii treści w aplikacji PhotoCountry

Długość łańcucha

Optymalna długość linii dla wygodnego czytania to 50-60 znaków ze spacjami. Rozmiar ten jest odpowiedni dla aplikacji desktopowych, jednak ekrany urządzeń mobilnych są mniejsze, dlatego w ich przypadku lepiej jest używać linii o długości 30-40 znaków.

Rozmiar czcionki jest ważniejszy niż długość linii, dlatego pierwszym krokiem jest wybór odpowiedniego rozmiaru czcionki.

„Powietrze” w tekście

• Jak mniejszy rozmiar ekranie, tym większą uwagę należy zwrócić na odstępy między literami.
• Lepiej dodać do tekstu „powietrze” i zwiększyć wysokość linii tak, aby była proporcjonalna do bazowej wielkości czcionki (zwykle odpowiada ona 120-150% wielkości tekstu głównego) – ułatwi to Czytać. W tym celu przydatny jest również system odstępów, który jest potrzebny do określenia rozmiaru różne elementy tekst. Jeśli czcionka wykorzystuje złotą proporcję, należy ją zastosować także w interwałach. Dzięki temu projekt będzie wyglądał schludnie i harmonijnie.
• Należy zwrócić uwagę na odstępy między akapitami: ta dodatkowa przestrzeń stanowi punkt zaczepienia dla oka i stwarza wrażenie, że tekst nie jest zbyt gęsty i jest łatwy do odczytania.

Odległość między elementami w aplikacji PhotoCountries

• Organizując kompozycję ekranu, należy pamiętać o „prawie bliskości”: pobliskie obiekty są postrzegane jako jedna grupa. I odwrotnie: jednorodne elementy, pomiędzy którymi występuje przerwa, nie będą uważane za jedną całość.

Kontrast kolorów

Kontrast jest szczególnie ważny przy projektowaniu aplikacji mobilnych, ponieważ ekran używany na zewnątrz może silnie odbijać światło. Wśród projektantów panują dwa powszechne błędne przekonania na temat kontrastu kolorów:

1. Im silniejszy kontrast, tym trudniej dla oczu. Dlatego szary odcień lepszy tekst. Rezultatem jest szary tekst na szarym lub białym tle. Jeśli jednak kolor tekstu i tła są podobne, percepcja jest utrudniona.
2. Im silniejszy kontrast, tym lepiej. Tekst silnie kontrastujący z tłem również jest trudny do odczytania. Czytanie biały tekst na czarnym tle szybko męczy wzrok. Nawet użytkownicy z dobrym wzrokiem odczują dyskomfort.

Znalezienie odpowiedniego kontrastu nie jest łatwe. To, co wygląda dobrze na monitorze programisty, może nie być widoczne na ekranie użytkownika. Przewodnik od.

Minimalny współczynnik kontrastu dla bloków czcionek wynosi 4,5:1, zalecany to 7:1. Ale są wyjątki od tej reguły:

• Duży tekst (18 punktów i więcej lub 14 punktów pogrubiony) - 3:1.
• Tekst będący częścią nieaktywnego elementu interfejsu nie wymaga kontrastu.

Usługa pomoże zapewnić odpowiedni kontrast tekstu.

Testowanie

Wybraną czcionkę należy przetestować wśród użytkowników, na urządzeniach z ekranami o różnej szerokości. Im więcej urządzeń objętych testami, tym lepiej.

Jeśli używasz dwóch czcionek, najlepiej odwiedź stronę Discover.typography.com, aby wybrać parę czcionek, które będą dobrze ze sobą współdziałać. Możesz także utworzyć macierz pokazującą, jak one wyglądają różne kombinacje. Aby dowiedzieć się, jak czcionka wpływa na konwersję, należy przeprowadzić testy A/B.

Pisać