Autor  

6 najczęstszych błędów w formatowaniu treści


Dobierając typografię na naszą stronę internetową, bloga czy do publikacji drukowanej — staramy się wybrać idealny font, który będzie oddawał charakter treści. Jest to czasami jedyna czynność, którą wykonujemy, żeby nasze teksty akapitowe były dopieszczone wizualnie. Natomiast pisząc sam tekst często ograniczamy się do sprawdzenia w nim ortografii, gramatyki i stylistyki. Są to niewątpliwie rzeczy najważniejsze, ale odpowiednie formatowanie treści nie powinno ograniczać się tylko do tego.

Zdarzyło mi się już kilka razy poruszać temat typografii w internecie, a najwięcej informacji przekazałam w poście, w którym opisałam całą podstawową wiedzę, którą powinien posiadać internetowy twórca na temat typografii na stronach WWW. Wyszedł z tego mini poradnik, zainteresowanym polecam tam zajrzeć. Tym razem po raz kolejny wracam tego zagadnienia, a moje porady opisane niżej dotyczą formatowania tekstów na blogach i stronach internetowych. Są to jednak na tyle uniwersalne zasady, że mogą wyjść poza internet i sprawdzą się też w projektach drukowanych.

Przyznaję, że bardzo lubię tematy dotyczące liter i chętnie sięgam po publikacje oraz książki o typografii. Także w tym poście podając przykłady często stosowanych błędów przy formatowaniu akapitów z treścią, posługuję się jako źródłem jedną z moich ulubionych książek, The Smashing Book #1. Poza tym wskazane błędy są też wnioskami, które wyciągnęłam przez lata pracy jako webdesigner oraz bloger. O wyglądzie treści w internecie można byłoby sporo pisać, ale mam nadzieję, że udało mi się, po raz kolejny, zebrać „w pigułce” najważniejsze rzeczy. Jakie błędy są najczęściej popełniane w formatowaniu treści i jak ich uniknąć? Poniżej przedstawiam 6 błędów, których należy unikać.


POGRUBIENIE


Zastosowane pogrubienia dla całego akapitu z tekstem spowoduje, że uwaga będzie rozproszona, przez co wyróżnienie konkretnej informacji nie będzie możliwe. Wyróżnienia w postaci pogrubień stosuje się, żeby położyć nacisk na określony komunikat. Tak jak w przykładzie akapitu, który właśnie czytasz.

6 najczęstszych błędów w formatowaniu treści


PISANIE WERSALIKAMI


Dużych liter, które w typografi profesjonalnie nazywane są wersalikami, nie powinno się stosować w dłuższym tekście. Jeśli mamy w akapicie więcej niż kilka wyrazów i zastosujemy wersaliki, to znacznie osłabimy czytelność i akapit będzie czytało się niewygodnie. Możesz to przetestować na grafice niżej i przekonać się o czym piszę Stosowanie dużych liter zaleca się do nagłówków, a małych wersalików lub kapitalików (są one „wielkimi literami” o rozmiarze mniejszym niż wersaliki1) do oznaczenia śródtytułów. Są to zwykle krótkie formy, składające się z kilku wyrazów, więc ich czytelność nie będzie zaburzona, jednocześnie nadamy tym sposobem hierarchii ważności w tekście.2


PODWÓJNE WYRÓŻNIENIE


Emfaza w tekście jest niezwykle ważna. Jeśli chcemy podkreślić i wzmocnić myśl, to powinniśmy starać się zrobić to bez zakłócania rytmu tekstu. Podobno najlepszą formą wyróżnienia jest kursywa, ja sama stosuję ją do nazw własnych lub cytatów. Najczęściej nacisk w wyróżnieniach kładzie się wspomnianymi wcześniej pogrubieniem lub zastosowaniem wersalików. Na którąkolwiek z tych metod byśmy się nie zdecydowali — warto pozostać przy jednej.3 Owszem, są sytuacje, kiedy stosuje się je podwójnie, jak np. grafiki ostrzegawcze, ale w większości przypadków np. wyróżnienie pogrubieniem i pochyleniem jednocześnie wygląda w tekstach akapitowych dość „nieudolnie”.


ZBYT DUŻE ODSTĘPY MIĘDZY LITERAMI


W tekstach akapitowych raczej „nie grzebie się” w kodzie i nie zwiększa odstępu między literami. Generalnie zasada jest taka, żeby dobrać font, który ma już sam w sobie dobrze zdefiniowane odległości liter. Zawsze powtarzam moim studentom, że projektanci krojów pisma, szczególnie tych popularnych jak np. Helvetica czy Lato, poświęcili lata, żeby dopracować ich formę, więc nie mamy już w zasadzie czego po nich „poprawiać”, bo tylko zrobimy literom „krzywdę”. Oczywiście może się zdarzyć, że skorzystamy z właściwości letter-spacing w CSS dla tekstu akapitowego i zwiększymy wartość o 1-2 piksele, nie jest to zabronione. Bardziej rozstrzelone litery sprawdzą się za to fajnie w nagłówkach albo przyciskach, ale też należy zwiększać ich odstępy z rozwagą.


ZA SZEROKI LUB ZA WĄSKI WIERSZ


W witrynach internetowych nie jest to tak jasna sprawa i wiele zależy od sytuacji. Doskonale wyjaśniają to autorzy książki The Smashing Book #1, podkreślając, że optymalna długość linii tekstu wygodnej do czytania to 45-85 znaków wraz ze spacjami oraz znakami interpunkcyjnymi. Jednak w stronach internetowych, które kładą nacisk głównie na tekst, m.in. właśnie blogach, ilość znaków w wierszu może wynosić nawet 100 i nie jest to błąd, ponieważ nie ma żadnych badań, które wykazałyby, że dłuższe teksty czyta się gorzej.4 W tej kwestii działa się dość intuicyjnie, a czytelność szerokich akapitów tekstu wspomaga regulowanie interlinii, czyli wysokości wierszy między liniami tekstu. Podsumowując: tak jak w gazetach, gdzie teksty łamane na kolumny, żeby czytanie było łatwiejsze, tak i w stronach internetowych zasada jest podobna, tekst akapitowy nie powinien być ani zbyt wąski, ani zbyt rozległy.


ZABURZONA WYSOKOŚĆ LINII


Odpowiedni dobór interlinii, czyli właśnie wysokości pojedynczego wiersza, znacznie wpływa na czytelność tekstu. Powinna być ona ustawiona tak, żeby litery z wyższych wierszy nie zahaczały o te pod nimi. Nie powinna być też za duża. Opisałam zasadę doboru interlinii w poście z wiedzą o typografii dla blogera. Odkreśla ją właściwość line-height w CSS, a automatyczne ustawienie tego parametru nie jest wystarczające dla odpowiedniej czytelności treści. W przeglądarkach domyślnie używana jest interlinia o wysokości fontu. Mając wybraną wielkość liter dla tekstu akapitowego na 16 px — interlinia będzie taka sama. A powinna być większa i przyjmować wartość około 1,5 wysokości wybranego kroju pisma. Jeśli więc stosujemy 16 px dla akapitu, to odstępy między linijkami powinny wynosić 22-26 pikseli, czyli spokojnie można dodać 6-8 px do wysokości automatycznej.5


Jeśli czujesz niedosyt w temacie, to sprawdź wpis, w którym opisałam też największe błędy, które są popełniane przy tworzeniu napisów na grafikach. Na blogu pojawił się też post dotyczący bardziej specjalistycznych tematów, o który często padały pytania, a mianowicie — jak dodawać ozdobniki kaligraficzne (czyli te wszystkie „wywijaski”) do odręcznych krojów pisma. Nie mogłabym też nie wspomnieć o wzbudzającym wiele emocji artykule z fontami, które powinniśmy unikać jak ognia! Zapraszam

Enjoy!!

____

1 The Smashing Book #1 Edycja polska, Helion 2013, s. 63
2 Ibidem, s. 98
3 Ibid., s. 100
4 Ib., s. 60
5 Ib., s. 61

Magda
O Autorze

Inżynier informatyki z wielkim sercem do… designu! Projektantka UI & UX, web designer oraz nauczyciel akademicki WIT. Właścicielka najpiękniejszego bloga w sieci :)

PODOBNE WPISY

Kolejne 7 fontów, od których trzymam się z daleka (i wam też radzę)
Kolejne 7 fontów, od których trzymam się z daleka (i wam też radzę)
August 07, 2017
Moje narzędzia pracy — programy i sprzęt
July 23, 2017
Jak nie przegapić wpisów na ulubionych blogach?
May 29, 2017
6 darmowych fontów z ozdobnikami
April 29, 2017
Jak zrobić logo?
January 09, 2017
Tekst po okręgu w Photoshopie
December 16, 2016
Akwarelowe strzałki do zdjęć lub grafik
September 27, 2016
It’s ofiszjal! Założyłam kanał na YT!
September 14, 2016
Jak zrobić złoty napis w Photoshop’ie
September 01, 2016
  • Na stronach internetowych dosyć częstym błędem jest jeszcze brak poprawnego wyświetlanie polskich liter. Zwykle ona na różnych przeglądarkach czy / i wersji mobilnej dziwnie wyglądają. Ale to tylko w przypadku niektórych czcionek. Warto jednak zwracać na to uwagę. Pozdrawiamy

  • Wszystkie negatywne przykłady, które przedstawiłaś skutecznie utrudniały czytanie. Postaram się o nich pamiętać

    • Mam nadzieję, że za każdym razem, kiedy przyjdzie Ci pracować z tekstem, w tyle głowy będzie „My Pink Plum pisała, że…”

  • Julia Siwinska

    Dzięki za rady! Na pewno skorzystam przy wypracowaniach, które piszę na komputerze
    Dziękuję!

  • Natalia

    Nigdy nie zwracałam na to uwagi w ten sposób, ale jak wytłumaczyłaś sprawę na przykładach, widzę jakie to ważne! Bardzo dziękuję, świetny post. Pozdrawiam

    • Mało kto na to zwraca uwagę, mamy spory kontakt z tekstem – blogi, Facebook, Twitter, portale informacyjne, etc… W większości wypadków wszystko nam się dobrze czyta i nawet nie wiemy dlaczego. Właściwie zastanawiamy się nad tym tylko wtedy, kiedy wejdziemy do jakiegoś miejsca i widzimy, że jest „nieładnie”, że niewygodnie nam się czyta…

  • Przydatny post.

  • Świetne rady! Dzięki piękne!

    • Proszę bardzo, mam nadzieję, że nawet takie specjalistyczne teksty spotkają się z uznaniem czytelników

  • Dobry tekst :). Ja co prawda do tych zasad stosuję się raczej intuicyjnie, ale to głównie z tego względu, że w tworzeniu stron jakieś doświadczenie mam (pamiętasz stare dobre czasy? :D), co też wymagało czasu i „napatrzenia się” na te teksty :).

    Napisz jeszcze post o zasadach formatowania tekstu, ale bardziej pod względem, kiedy spację po przecinku, kropce, itd. Zauważyłam, że wiele osób ma z tym problem ;). Chyba że coś takiego już u Ciebie powstało, a ja przegapiłem ;).

    • Dziękuję bardzo!

      Chodzi o podstawowe zasady interpunkcji? Jeśli tak, to zapraszam na bloga Uli (ulalupinska.pl), ona się w tym specjalizuje

      • Inteprunkcja w języku polskim to osobna sprawa, bardziej miałam na myśli kwestie związane z formatowaniem tekstu, ale może Ula również porusza te kwestie na blogu :).

  • Ze wszystkim się zgadzam i podpisuję obiema rękoma! Ciekawi mnie natomiast co myślisz o justowaniu tekst, zarówno na blogu jak i w materiałach drukowanych?

    • Jeśli chodzi o justowanie tekstu na stronach www, to uważam, że nie powinno się go stosować. Głównie ze względu na urządzenia mobilne oraz fakt, że strony www wyświetlane są na całej masie urządzeń. Nie da się ujednolicić układu tekstu kiedy strona jest responsywna i blok z akapitem ciągle zmienia swoją szerokość. W drukowanych projektach jest inaczej, ponieważ wydrukowana karta A4 to w każdych rękach wciąż jest A4, nie zmienia formatu „dla każdego użykownika”, a strona czy blog owszem

  • Amelia Wolińska

    Piękny blog Zapraszam do siebie: http://agrafka-blog.blogspot.com/ i do wpisu: TOP5: blogi. Mam nadzieję, że banan pojawi się na Waszych twarzach

  • Niebotek

    można znaleźć tutaj wiele praktycznych rad
    ja aktualnie szukam jakiś tutoriali odnośnie uzyskania bajkowego efektu, tzn. ilustracji jak z dziecięcych książek
    coś w stylu profilu ninastajner na instagramie. Czy mogłabyś coś podpowiedzieć w tej kwestii?

  • Piękne rady. Mam jednak prośbę. Zajrzyj na mego bloga i podaj mi kilka rad, jeśli znajdziesz chwilę. Gdy będziesz akurat nudzić się mocno, kiedy będzie padać na dworze, gdy katar położy Cię do łóżka, wejdź do mnie i popatrz na style. Nie teraz zaraz, tylko, gdy poczujesz taką potrzebę, kiedy zachcesz stać się potrzebna, doceniona, może pomocna. Wtedy spójrz tam i kliknij kilka rad zagubionemu pisarzowi, który, zabrał się za to, nie mając zbytniego pojęcia, o tym, co czyni, a uczynił. Mój blog: demonypolskie.blogspot.com. Nie namawiam, tylko czekam. Najwyżej, wejdziesz za sto lat, ale wpadnij. Masz pojęcie, ja nie mam,

  • Uwielbiam takie teksty w Twoim wydaniu, istne kompendium wiedzy!

  • Właśnie uzmysłowiłaś mi tym tekstem, że muszę w jakiś sposób zmienić czcionkę na moim blogu, bo ta którą piszę nie oddaje w 100% mojego charakteru
    Dzięki za przydatne i usystematyzowane porady!

  • Ana

    Droga Magdo a co to za font, którym się podpisujesz i widnieje na zdjęciu wpisu „w formatowaniu” jest ganialny, mogłabyś podać nazwę tej czcionki? Pozdrawiam

    • Hej Ana Nazwy fontów podaję tylko w wiadomościach prywatnych

  • Świetny wpis, chylę czoła! Wyląduje w moich znajdkach na blogu – starannie to opisałaś

  • Super! Bardzo podobają mi się przykłady To zawsze do ludzi przemawia najbardziej