Autor: Andrzej Szelemetko
Jak poprawić wygląd tekstu na stronie? Poznaj 10 kroków!
Content is king’ jak mawia wielu webmasterów, ale nie zapominajmy o tym, że treść pełni funkcję poprzez swój wygląd. Wygląd, który można modyfikować na wiele sposobów, aby strona internetowa działała lepiej. Możesz zmieniać krój pisma, rozmiar, kolor, czy układ tekstu. Dziedzina, która się tym zajmuje to typografia. W tym artykule pokażę, jakie kroki podjąć, aby poprawić wygląd tekstu na Twojej stronie www!
Font czy czcionka?
Na początku należy zrozumieć, czym jest font. Font według słownika PWN to «rodzaj pisma dla komputera lub drukarki». Wiele osób błędnie na font lub inaczej krój pisma mówi "czcionka". Chociaż potocznie to pojęcie jest zrozumiałe, to jednak jest błędne i lepiej używać font lub krój pisma. Dlatego tez w tym artykule nie znajdziesz określenia "czcionka".
Google Fonts oferuje setki fontów dostępnych za darmo do wykorzystania na stronach www. Przy tak dużej ilości ciężko jest się zdecydować, który będzie tym najlepszym. Wybierając font, pamiętaj o tych ważnych aspektach:
Czytelność kroju pisma, czyli jak wyświetlają się litery
Tekst na stronie internetowej powinien być przede wszystkim czytelny. Fonty takie, jak Pacifico, czy Pinyon Scirpt chociaż wyglądają bardzo ładnie, są koszmarnie trudne do odczytania. Wybierz font prosty, który nie odwraca uwagi od tekstu i jest zrozumiały już na pierwszy rzut oka. Oczywiście nie zapomnij o tym, żeby krój pisma był estetyczny i ładnie prezentował się na stronie.
Ten sam tekst w 3 różnych fontach.
Każdy font ma swój charakter (idealna typografia)
Wiele krojów pisma wygląda na pierwszy rzut oka atrakcyjnie i wywołuje myśl „Mam! To jest ten jedyny”. Jednak nie każda ładny font będzie pasować do strony, którą tworzysz. Mimo że wizualnie będzie wyglądać ok, to pamiętaj, że font ma swój charakter i wpływa na to, jak Twoja strona będzie odbierana. Ten sam tekst napisany dwoma różnymi krojami pisma, może nieść ze sobą zupełnie inną treść.
Wybierając krój pisma, pamiętaj o dwóch ważnych aspektach, czyli kto jest czytelnikiem i co tekst ma sobą przekazać.
-
Jeżeli robisz stronę internetową, która ma budzić zaufanie, jak np. strona kancelarii prawnej to wypróbuj fonty wyglądające dostojnie, jak Neuton, czy Domine.
-
Dla strony o nowych technologiach wybierz font prosty o futurystycznym wyglądzie np. Open Sans lub Roboto.
-
Strona dla nastolatków, np. z odzieżą, spróbuj wykorzystać Karla albo Merriweather.
-
Jeżeli chcesz na swojej stronie podać fragment kodu programu, użyj do tego np. Fira Mono.
-
Strona błędu 404 – użyj kroju pisma, który kojarzy się z błędem, jak np. Cousine, który jest bardzo podobna do Courier New ze słynnego windowsowego ‘blue screen of death’.
Ciekawe i często używane fonty znajdziesz na stronie typewolf.com, ale pamiętaj, że wybór jest o wiele większy. Aby zobaczyć, jak fragment tekstu prezentuje się w danym foncie możesz skorzystać z wordmark.it.
I pamiętaj, jeżeli nie tworzysz strony przedszkola, albo sklepu z zabawkami to zapomnij o czcionce Comic Sans. Nawet jeżeli tworzysz którąś z powyższych stron, to zastanów się dwa razy, czy warto ją zastosować! Dlaczego nie jest to dobry wybór, możesz dowiedzieć się na comicsanscriminal.com.
Ogonki, czyli polskie znaki
Nie każdy font nadaje się do wykorzystania na stronie w języku polskim. Niektóre po prostu nie mają w sobie liter z ogonkami, kropkami i kreskami, tak często używanych w naszym ojczystym języku.
Żeby mieć pewność, że font, który wybierasz ma polskie znaki podczas wyszukiwania w Google Fonts wybierz filtr, który wyświetli Ci tylko fonty z Latin Extended.
Dodając font do strony, pamiętaj, aby wybrać opcję Latin Extended.
Jak dodać font z Google Font do stron internetowych tworzonych w WebWave dowiesz się w tutorialu.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Fonty warto stosować w parach
Kiedy wybierzesz już font, możesz chcieć urozmaicić stronę internetową poprzez dobranie do niego pary. Wtedy jednego fontu używaj np. w menu i stopce, a drugi wykorzystaj do prezentacji tekstu. Możesz wykorzystać narzędzie typegenius.com, które do wybranego kroju tekstu zaproponuje parę. Ciekawych połączeń fontów możesz szukać na tych stronach:
Upewnij się, że dodatkowy font, który wybierzesz ma w sobie polskie znaki!
Jak wygląda wybrane przez Ciebie połączenie możesz sprawdzić za pomocą narzędzia webfontblender.
Pamiętaj, że liczy się przede wszystkim Twoje zdanie i jeżeli zaproponowane połączenie Ci się nie podoba, to z niego nie korzystaj. Możesz zrobić swoje, takie, jakie uznasz za stosowne. Możesz też ograniczyć się do jednego fontu na stronie.
Nie samym fontem tekst żyje
Oprócz wyboru odpowiedniego fontu możesz jeszcze pomajstrować przy innych wizualnych elementach tekstu.
Rozmiar ma znaczenie
Ważnym atrybutem tekstu jest jego rozmiar. Żeby strona internetowa była, jak najbardziej czytelna warto ustawić odpowiednie rozmiary dla nagłówków oraz zwykłego tekstu. Trochę inne rozmiary wyglądają dobrze na komputerach, a inne na urządzeniach mobilnych. Niektórzy wolą bardzo duże nagłówki, inni trochę mniejsze. Poniżej przedstawiam parę propozycji rozmiarów, które wyglądają dobrze i są bardzo czytelne:
|
|
Desktop |
Desktop/Mobile |
||
| H1 |
48 px |
42 px |
32 px |
32 px |
| H2 |
36 px |
26 px |
26 px |
24 px |
| H3 |
28 px |
20 px |
22 px |
18 px |
| zwykły tekst |
16 px |
16 px |
16 px |
16 px |
Struktura nagłówków na stronie www desktopowej i mobilnej
Jeżeli jesteś zwolennikiem mniejszych fontów, to możesz zacząć od mniejszej liczy px dla zwykłego tekstu i kolejne nagłówki dobrać zachowując proporcje. Od pewnego czasu utarło się jednak, że 20px to optymalny rozmiar dla tekstu na stronach internetowych i ten zdecydowanie polecam.
Staraj się też, aby linie tekstu miały odpowiednią długość. Wiersz tekstu wygodny do czytania ma, około 60-75 znaków na komputerze (tak wiem, nie przestrzegamy własnych wskazówek), a 35-40 na smartfonie. Jeżeli linia tekstu będzie dłuższa, to czytający będzie miał problem ze skupieniem wzroku na tekście. Jeżeli linia będzie krótsza, to czytający zbyt często będzie musiał skakać wzrokiem z początku na koniec wiersza, co w rezultacie zmęczy jego oczy.
Kolor tekstu
Kolor tekstu to należy dopasować do koloru tła. Na jasnych stronach zalecam czerń, ale nie zawsze. Czasem czerń potrafi wyglądać na stronie bardzo ciężko, zwłaszcza kiedy kolorystyka strony jest bardzo jasna. Można wtedy zamienić czerń na szarość, która wygląda o wiele lżej i nie kontrastuje tak bardzo z jasnym tłem. Na ciemnym tle użyj jasnego tekstu. Najlepiej białej albo bardzo jasnej szarości.
Przykładowe kolory tekstów w zależności od tła.
Kolor tekstu można wykorzystać, żeby przykuć uwagę do ważnej treści, np. nagłówka. Możesz użyć jasnego koloru na ciemnym tle dla nagłówka, tak jak zrobione jest to w tym artykule, aby wyróżniał się on i zwracał na siebie uwagę. Pamiętaj jednak, aby kolory zawsze wybrać z palety kolorów, które wykorzystałeś na stronie. Za dużo kolorów czyni stronę pstrokatą i nieprzyjemną dla oka.
Czytelna struktura tekstu
Dobrze zredagowany tekst, ma strukturę składającą się z nagłówków H1, H2, H3 oraz treści w normalnym formacie. Taka struktura tekstu porządkuje go i ułatwia nawigację, przez co staje się on bardziej przyjazny dla użytkownika. Pamiętaj też, że tekst sformatowany w ten sposób jest lepiej rozumiany przez wyszukiwarki.
Zawarcie kluczowych fraz w nagłówkach ma pozytywny wpływ na SEO. Nie przesadź z tym. Pamiętaj, że tekst jest przede wszystkim dla czytelnika i dla niego musi być zrozumiały. Nawet jeżeli wylądujesz na pierwszej stronie wyników wyszukiwania Google, ale Twoja strona będzie odrzucana przez internautów, to nie odniesiesz z tego żadnych korzyści.
Dobrym zwyczajem, jest wyróżnienie kluczowych słów lub fragmentów tekstu, np. za pomocą pogrubienia. Użytkownik wie wtedy, co jest ważne i szybko przeglądając Twój artykuł, może łatwo wychwycić najważniejsze fragmenty i stwierdzić, czy warto go czytać w całości.
Układ tekstu
Tekst potrzebuje przestrzeni. Strona internetowa zapchana tekstem jest mało przyjazna dla oka i zniechęca do przeglądania. Zachowaj odstęp między treścią, a innymi elementami strony. Dodaj przestrzeń pomiędzy paragrafami i oddal nagłówki od paragrafów wstawiając tam pustą linię. Tak sformatowany tekst o wiele przyjemniej się czyta i łatwiej się w nim odnaleźć.
Wyrównanie tekstu
Wyrównanie tekstu ma bardzo duży wpływ na jego czytelność i na wygląd całej strony.
Prawie zawsze najlepszym rozwiązaniem jest wyrównanie tekstu do lewej strony, zdecydowanie rzadziej wyjustowanie tekstu i jeżeli masz wątpliwości, to znaczy, że tekst powinien być wyrównany do lewej.
Wyrównanie do prawej zalecam zostawić dla speców od designu, bo nie jest łatwo za jego pomocą uzyskać ładne efekty.
Czasem można pozwolić sobie na wyśrodkowanie części tekstu, szczególnie dobrze sprawdza się to przy:
-
Nagłówku H1
-
Cytatach
-
Podpisach pod zdjęciami
-
Zdjęciach wplecionych w tekst
Najpierw rzeczy najważniejsze
Użytkownicy w internecie czytają według wzorca F. Oznacza to, że często nie przeczytają Twoje tekstu w całości. Ich uwaga skupi się na dwóch pierwszych paragrafach, dlatego tam zawrzyj najważniejsze dla czytelnika informacje. Poniżej przedstawione są heatmapy, które pokazują, gdzie skupia się wzrok czytelników podczas przeglądania strony.
Heatmap'y dla wzorca F
Wzorzec F pozwala wyciągnąć następujące wnioski:
-
Zaczynaj każdy paragraf i nagłówek od słowa, które niesie ze sobą ważne informacje. To właśnie pierwsze słowo użytkownicy przeczytają najczęściej.
-
Statystycznie pierwsze słowo z paragrafu będzie przeczytane około 5 razy częściej niż trzecie słowo w wierszu.
-
Kluczowe dla Twojej strony internetowej informacje zawrzyj w dwóch pierwszych paragrafach, gdyż często będą one jedynymi, które przeczytają osoby odwiedzające Twoją stronę www.
Niewyraźne, rozmyte czcionki w Windowsie: co zrobić?
Jeśli właśnie jesteś na etapie zakupu nowego laptopa lub zwyczajnie instalujesz sobie system Windows 10, bądź przygotowany na problem – rozmazane fonty. Jak sobie z tym poradzić?
Najlepszym rozwiązaniem jest zwykle włączenie funkcji Clear Type. Możesz to zrobić w ten sposób:
1. Kliknij w przycisk Windows i wejdź w USTAWIENIA
2. Klijnij w PERSONALIZACJĘ, a następnie w CZCIONKI
3. Kliknij w prawej górnej części w DOPASUJ TEKST CLEARTYPE.
Podsumowanie, czyli co powinieneś wynieść z tej lektury:
Wybierz font czytelny, który pasuje do charakteru strony.
-
Jeżeli na stronie korzystasz z więcej niż jednego kroju pisma, to upewnij się, że dobrze razem wyglądają.
-
Upewnij się, że wybrane fonty mają wbudowane polskie znaki i zaciągnij odpowiednią wersję na stronę.
-
Nie korzystaj z Comic Sans, serio.
-
Ustaw odpowiednie rozmiary fontów dla nagłówków i zwykłego tekstu.
-
Używaj głównie czerni, bieli i szarości, jako kolorów tekstu.
-
Nadaj tekstowi czytelną strukturę za pomocą nagłówków.
-
Nie zapychaj strony tekstem, daj mu przestrzeń.
-
Wyrównuj tekst głównie do lewej.
-
Najważniejsze informacje zawieraj na początkach paragrafów i na początku całego tekstu.
Wiesz, jak powinien wyglądać tekst na stronie internetowej? Zrób swoją stronę www już dziś!
Koniecznie przeczytaj te teksty:
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.