Czcionki do karuzeli, rozmiar tekstu i kontrast

Jaki rozmiar czcionki w karuzeli?

Projektuj pod telefon, nie pod swój monitor. Telefon pokazuje slajd o szerokości 1080 px na około 360 punktach, czyli w jednej trzeciej jego szerokości w pikselach (duże telefony pokazują go trochę szerzej). Każdy rozmiar ustawiony na slajdzie jest więc na ekranie, na którym ludzie go czytają, mniej więcej trzy razy mniejszy.

Wytyczne projektowe Apple ustalają najmniejszy tekst na iPhonie na 11 punktów, a domyślny rozmiar do czytania na 17 punktów. Pomnóż przez trzy, a dostaniesz wartości dla slajdu o szerokości 1080 px: około 33 px jako minimum dla wszystkiego, co ma być przeczytane, i około 51 px dla wygodnego tekstu głównego. Darmowe narzędzie Sprawdzanie PDF na LinkedIn od aiCarousels oznacza tekst poniżej około 24 px jako trudny do przeczytania na telefonie: traktuj to jako dolną granicę dla drobnych etykiet, takich jak numer strony czy Twój nick, a nie jako rozmiar dla zdań.

Rozmiary tekstu na slajdzie 1080 px i ich odpowiedniki na telefonie

Rozmiary slajdu podzielone przez trzy: telefon, który pokazuje slajd na szerokości 360 punktów. Punkty ekranowe to jednostka Apple, każdy to mniej więcej jeden piksel CSS; WCAG mierzy duży tekst w punktach drukarskich, a jego 18 pt to około 24 punkty ekranowe. Ostatnia kolumna jest narysowana w tym rozmiarze ekranowym. Rozmiary Apple: Human Interface Guidelines, Typography oraz UI Design Dos and Don’ts.

Pracujesz na większym płótnie? Skaluj tak samo: przy szerokości 2160 px podwój każdą wartość. Cienka albo zwężona czcionka potrzebuje większych rozmiarów niż te, a nie mniejszych; wytyczne Apple radzą celować wyżej, gdy własna czcionka ma cienką odmianę.

Popularne wymiary karuzel mają wszystkie 1080 px szerokości (1080 × 1350 dla LinkedIn i Instagrama 4:5, 1080 × 1440 dla Instagrama 3:4, 1080 × 1920 dla TikToka), więc te rozmiary działają na każdej platformie. Dokładne wymiary dla każdej aplikacji są w wymiarach karuzeli na każdej platformie.

Jakie czcionki najlepiej sprawdzają się w karuzelach?

Najlepsza czcionka do karuzeli to ta, której nie zauważa się podczas czytania. Kilka zasad, które obowiązują na każdej platformie:

• Dwie czcionki wystarczą. Jedna do nagłówków, druga do całej reszty. Resztę hierarchii buduj rozmiarem i grubością, nie trzecią czcionką.
• Niech charakter niesie czcionka nagłówków. Szeryfowa, gruby grotesk albo zwężony krój display sprawdzą się przy kilku dużych słowach.
• Czcionka tekstu głównego ma być prosta. Otwarte kształty liter, spora wysokość x (wysokość małych liter) i solidna odmiana regularna. Spełnia to większość czystych krojów bezszeryfowych.
• Unikaj cienkich i lekkich odmian w małych rozmiarach. Wytyczne Apple ostrzegają, że odmiany Ultralight, Thin i Light są słabo widoczne, zwłaszcza gdy tekst jest mały.
• Czcionki odręczne i same wersaliki zostaw na kilka słów. Czcionkę pisaną albo wiersz wielkimi literami czyta się wolniej niż małe litery. W porządku przy krótkim nagłówku, męczące w akapicie.
• Trzymaj się tych samych na każdym slajdzie i w każdej karuzeli. Ludzie uczą się Twojego stylu, a zestaw marki zachowuje czcionki i kolory dla każdej nowej karuzeli.

Pary czcionek, które sprawdzają się na telefonie

Pary z darmowego generatora par czcionek. Wszystkie to Google Fonts, darmowe także do użytku komercyjnego.

Jakiego kontrastu potrzebuje tekst w karuzeli?

Kontrast to różnica jasności między tekstem a tym, co jest za nim, zapisywana jako stosunek od 1:1 (brak) do 21:1 (czarne na białym). Standard dostępności stron internetowych, WCAG 2.2, wymaga co najmniej 4,5:1 dla tekstu i 3:1 dla dużego tekstu: 18 punktów albo 14 punktów pogrubionych. WCAG mówi, że to samo dotyczy obrazów tekstu, a każdy slajd karuzeli jest takim obrazem. Zwolnione są tylko logotypy i tekst przypadkowy: słowa, które są czystą dekoracją albo po prostu znalazły się na zdjęciu. Nagłówek i tekst główny slajdu nie są ani jednym, ani drugim.

WCAG przyjmuje, że 18 punktów drukarskich to około 24 px na ekranie, czyli 24 punkty ekranowe z tabeli wyżej. Na slajdzie, który telefon pokazuje w jednej trzeciej rozmiaru, to około 72 px (albo około 56 px pogrubionym). Nagłówki tej wielkości mogą więc mieć 3:1. Wszystko mniejsze, łącznie z tekstem głównym, potrzebuje 4,5:1.

Przykłady kontrastu dla kolorów karuzeli

Stosunki obliczone wzorem WCAG dla dokładnie tych kolorów. Pomarańczowy pokazuje typowe rozwiązanie: zostaw kolor, zmień tekst na nim.

• Tekst na zdjęciu ma inny kontrast przy każdej literze. Umieść słowa na jednolitym panelu albo przyciemnij zdjęcie za nimi i sprawdź najjaśniejsze miejsce za tekstem.
• Kolory marki często nie sprawdzają się jako kolory tekstu. Używaj ich do teł, kształtów i jednego wyróżnionego słowa, a tekst ustaw w swoim ciemnym lub jasnym kolorze neutralnym.
• Zostaw zapas. 4,5:1 to minimum na dobrym ekranie. Ludzie czytają karuzele w słońcu, przy przyciemnionym ekranie. Wyższy stosunek nic nie kosztuje.

Ile tekstu zmieścić na jednym slajdzie karuzeli?

Mniej, niż myślisz. Jeśli słowa nie mieszczą się w powyższych rozmiarach, slajd zawiera za dużo.

• Jeden pomysł na slajd. Nagłówek, który stawia tezę, i jeden lub dwa wiersze, które ją wspierają.
• Krótka okładka. 12 słów lub mniej to cel, który kontrola Gotowe do publikacji? w aiCarousels liczy dla pierwszego slajdu.
• Dziel, nie zmniejszaj. Gdy slajd czyta się jak akapit, zrób z niego dwa slajdy. Większość platform daje Ci miejsce: Instagram przyjmuje do 20.
• Krótkie listy. Kilka punktów na slajd, każdy w jednym wierszu.

W aiCarousels możesz to ustawić, zanim cokolwiek zostanie napisane: Więcej opcji › Słów na slajd ma opcje Auto, Konkretna (najmniej słów), Zrównoważona i Szczegółowa. Podczas edycji tekst, który nie mieści się w czytelnym rozmiarze, dostaje czerwoną etykietę Za długie na to pole zamiast się zmniejszać, a Skróć, aby się zmieścił skraca go Twoim głosem. To inteligentne dopasowanie tekstu. Możesz też przełączyć slajd na układ z większą ilością miejsca: Twoje słowa przejdą razem z nim.

Czy pogrubienie Unicode szkodzi czytnikom ekranu?

To zależy, gdzie jest pogrubienie.

• Na slajdzie: pogrubienie to własna pogrubiona odmiana czcionki, wrysowana w obraz. Wygląda tak samo dla każdego, kto je widzi. Żaden problem.
• W opisie: „pogrubienie” wklejone z formatera tekstu wcale nie jest pogrubieniem. To inny zestaw znaków, Mathematical Alphanumeric Symbols (od U+1D400 do U+1D7FF), stworzony do matematyki. Unicode zaleca, by nie używać ich zamiast prawdziwego formatowania. Czytniki ekranu mogą je pominąć albo odczytać coś w rodzaju „mathematical sans-serif script t”, jak wyjaśnia brytyjska organizacja charytatywna Scope, działająca na rzecz osób z niepełnosprawnościami.

Stylizowane litery ogranicz więc do kilku słów i nigdy nie używaj ich w imieniu, hashtagu ani w zdaniu, które trzeba zrozumieć. Jak to zrobić w każdej aplikacji, znajdziesz w poradniku pogrubiony tekst na LinkedIn i w formaterze tekstu na Instagram.

Czy czcionki i rozmiary tekstu zmieniają się na LinkedIn, Instagramie i TikToku?

Powyższe rozmiary obowiązują wszędzie, bo wszystkie slajdy mają 1080 px szerokości. Zmienia się to, co na nich leży:

• TikTok i slajdy 9:16: przyciski aplikacji i opis zasłaniają krawędzie slajdu. Trzymaj słowa z dala od nich. aiCarousels rysuje te obszary, gdy włączysz Pokaż strefy bezpieczne.
• Instagram: licznik slajdów jest w prawym górnym rogu, a kropki pod obrazem. Zostaw margines przy krawędziach i napisz tekst alternatywny dla każdego slajdu.
• LinkedIn: karuzela to dokument PDF. Rozmiar strony, okładkę i sam PDF omawia poradnik wskazówki projektowe i specyfikacja karuzeli na LinkedIn.

Przykład: karuzela zbudowana według tych zasad

Sześć slajdów w formacie 4:5. Duże nagłówki, po jednym wierszu tekstu głównego, ciemne na jasnym i jedna para czcionek od okładki do ostatniego slajdu.

Jak ustawić czcionki, rozmiar tekstu i kontrast w aiCarousels