Zaloguj się

Zarejestruj się

Panel Webmastera

Projektowanie stron internetowych

Projektowanie stron internetowych bez kodowania to czasem wyzwanie, ale też duża przyjemność. Tworząc stronę internetową...

Canva - jak z niej korzystać i stworzyć stronę internetową?

Canva - program graficzny, który zna zapewne większość z nas. To kompleksowe narzędzie wykorzystywane jest w różnych celach...

Jak stworzyć dobrą stronę internetową?

10 konkretnych rzeczy, które sprawią, że Twoja strona internetowa będzie ładna i skuteczna...

Podstawy UI design - jak projektować intuicyjny interfejs?

Tworzysz strony internetowe lub aplikacje. Słyszałeś o UI designie. Ale czy możesz powiedzieć dokładnie, czym jest UI design?

Przeczytaj więcej.

Autor poradnika                     Gabriela Majewska

Web Design Expert                Milena Świętońska

Pokaż swój styl z WebWave

Wbudowana baza zdjęć, w pełni responsywny design i pełne pole do popisu. Zaprojektuj swoją stronę tak jak chcesz w kreatorze WebWave. Bez ograniczeń i bez kompromisów.

Zacznij teraz 

Jak poprawić wygląd tekstu na stronie? Poznaj 10 kroków!

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.

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ś!

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. Kliknij w PERSONALIZACJĘ, a następnie w CZCIONKI

3. Kliknij w prawej górnej części w DOPASUJ TEKST CLEARTYPE.

Heatmapa dla wzorca F

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.

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

Przykładowe kolory tekstów w zależności od tła.

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źć.

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śli 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.

Kolor tekstu

Kolor tekstu 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 granat lub 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.

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. 

Struktura nagłówków na stronie www desktopowej i mobilnej

Zacznij teraz 

Dołącz do WebWave, gdzie ponad 600 tysięcy użytkowników tworzy swoje niepowtarzalne strony internetowe. 

Za darmo Bez kodowania

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. Inne rozmiary wyglądają dobrze na komputerach, a inne na urządzeniach mobilnych. Poniżej przedstawiam parę propozycji rozmiarów, które wyglądają dobrze i są bardzo czytelne:

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 18px to optymalny rozmiar dla tekstu na stronach internetowych i ten zdecydowanie polecam. Nie zaleca się używać mniej niż 16px, gdyż odbiorca może mieć problem z przeczytaniem tekstu.


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 i zniechęci do pozostania na stronie.

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

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 także w nagłówkach, 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:

Autor poradnika 
Andrzej Szelemetko

Web Design Expert
Wiktoria J. Żebrowska

Autor poradnika                   Andrzej Szelemetko

Web Design Expert          Wiktoria J. Żebrowska

       Zweryfikowane przez Eksperta

11 minut

09.04.2024

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?


Żeby odpowiedzieć na to pytanie, musimy najpierw zrozumieć czym jest czcionka. Czcionka, jako pojęcie, ma swoje korzenie w tradycyjnym drukarstwie, gdzie oznaczała zestaw metalowych elementów zawierających kształty poszczególnych liter i znaków. Drukarnie korzystały z tych metalowych czcionek do tworzenia tekstu na papierze. Z kolei font to pojęcie, które pojawiło się w dobie komputerów i technologii cyfrowej. Font to plik cyfrowy, który zawiera dane na temat kształtów i stylów znaków, które razem tworzą daną czcionkę. 

 

Przejście od czcionek metalowych do fontów cyfrowych miało ogromny wpływ na sposób, w jaki tworzymy i projektujemy teksty. Wcześniej drukarnie miały dostęp do ograniczonej liczby czcionek, podczas gdy obecnie projektanci mają nieograniczone możliwości wyboru fontów, które mogą zastosować w swoich projektach. 

 

Wiele osób błędnie na font lub inaczej krój pisma mówi "czcionka" i chociaż potocznie to pojęcie jest zrozumiałe, to jest błędne i zdecydowanie lepiej używać słowa font lub krój pisma. 

 

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. Wymyślne fonty, często imitujące styl pisany odręcznie, chociaż wyglądają ł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 pasował do stylu Twojej strony. 

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 font, 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 Playfair Display.

  • 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, by wystrzegać się fontu Comic Sans. Jego użycie zostaw na tworzenie memów. O tym, dlaczego nie jest to dobry wybór, możesz przeczytać 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.

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: