Bywają dni, że przeglądając internety, dostaję kopniaka zmuszającego mnie do pisania takich postów jak ten. W walce o dobre imię design’u i wyższe poczucie estetyki, stworzyłam zestawienie fontów, które powinniście omijać szerokim łukiem. Nie tylko dlatego, że są znane jako kroje pisma w złym guście. Moja lista zawiera też fonty mocno oklepane, które znajdziemy na tanich opakowaniach kaszy gryczanej. A także te posiadające łatki, przyklejone mocno, niczym super glue. I wiem, wiem, gusta są różne, ale tu w niektórych przypadkach – ciężko w ogóle dyskutować o gustach!

 

Źródło Comic Sans Project

Autor Banksy

Jeśli ktoś chciałby użyć go w pokoju maluchów, w zaproszeniu na kinder party lub czymkolwiek z dziećmi związanym – nie ręczę za siebie. Pod żadnym pozorem nie faszerujcie nim dzieci. To nie jest dobry krój pisma i nie wpłynie on pozytywnie na poczucie estetyki!

Trajan jest naprawdę niezłym fontem, który posiada swoją historię. I łatkę niestety też, bo jest znany jako krój pisma wszystkich plakatów filmowych. Ciężko znaleźć produkcję, na której plakacie nie byłoby Trajana. Całą sprawę świetnie przedstawia autor jutubowego filmiku Trajan is the Movie Font. I co, zauważyliście to wcześniej?

Chciałabym też spełnić swoją małą edukacyjną misję i wyjaśnić, że font to nie czcionka. Font komputerowy oczywiście. Uszy i oczy mi krwawią, kiedy słyszę lub czytam słowo czcionka, w odniesieniu do cyfrowej postaci pisma. Jest ona rodzajem nośnika drukarskiego. Tradycyjnego, takiego jaki znajdziecie w maszynie do pisania. I na tym pozostańmy, mimo, że znajdą się tacy, którzy chętnie by się o to nazewnictwo spierali. Font to krój pisma w formie cyfrowej. I kropka. 

Źródło zdjęcia głównego kaboompics.com

Artykuł Fonty, których powinieneś unikać jak ognia pochodzi z serwisu My Pink Plum!.

Mr De Haviland też znajdziecie na GF, jest dość charakterystyczny i posiada piękne litery w wersalikach (duże litery). Pięknie wyglądają pisane nim inicjały i skróty typu RSVP! Jak zostaną do niego dorobione polskie znaki, to otrzyma miano pisanki idealnej

Chyba nie muszę mówić, że uwielbiam Mulberry Script, bo widać to w większości moich prac. Jest to font płatny, znajdziecie go np. na MyFonts. Występuje w wersjach regular i bold, ale ma jeszcze jedną zaletę, za którą go ubóstwiam – odmianę z ornamentami, którymi można zdobić dodatkowo grafiki. Wspaniały, z polskimi znakami i ekstrasami. Wow!

Artykuł 9 najbardziej romantycznych fontów pochodzi z serwisu My Pink Plum!.

Moje ulubione pytanie! Zawsze zadawane jest z przerażeniem w oczach. Przed rozpoczęciem studiów nie trzeba być władcą pędzla i ołówka. Na uczelni są przedmioty manualne, takie jak Rysunek i Malarstwo, na których studenci uczeni są malowana i rysowania od podstaw. Poziom jest oczywiście zróźnicowany. Jedno jest pewne – brak tych umiejętności nie jest przeszkodą do zostania studentem grafiki!

Jeśli jesteście ciekawi jak wyglądają rezultaty pracy studentów grafiki WIT – koniecznie zaglądnijcie na stronę Grafiki. Znajdują się tam galerie prac z różnych przedmiotów, realizowanych na kierunku. Ponadto na vimeo WIT znajdziecie filmy i animacje, które studenci wykonali na specjalizacji Technologie Multimedialne. Natomiast na fanpage’u GRAFIKA WIT na Facebook’u możecie śledzić newsy z życia kierunku oraz znaleźć info o ciekawostkach związanych z grafiką i projektowaniem. Zapraszam

Artykuł Studiowanie grafiki komputerowej pochodzi z serwisu My Pink Plum!.

Jeśli można powiedzieć, że na czymś „zjadło się zęby”, to ja zrobiłam to, projektując witryny internetowe. Zawodowo zajmuję się web designem od niemal 10 lat. Dzięki temu mam szerokie doświadczenie i wiem o wizualnych aspektach publikacji internetowych rzeczy, których nie znajdziecie w typowych poradnikach. Dlaczego? Po pierwsze — moja wiedza to efekt wieloletniej praktyki, a po drugie, miałam zaszczyt uczyć się projektować od wspaniałych twórców. Między innymi od Ani Kłos, która prowadzi bloga o sztuce i designie — Retroavangarda. Ania jest doktorem sztuki, ma przeogromną wiedzę na temat projektowania graficznego i pisze jedyne w swoim rodzaju, unikalne treści, których nie znajdziecie nigdzie indziej.

W tym poście chciałabym przybliżyć Wam temat typografii na stronach internetowych. Wyjątkowy, bo z naciskiem na blogi. Jako twórcy tekstów wyświetlanych online, dbamy o stylistykę, ortografię, interpunkcję, czy ładne, dobrane fotografie. To oznaka profesjonalizmu, świadcząca o wysokiej jakości treści. W idealnym modelu powinniśmy zadbać również o to, żeby napisany przez nas artykuł wyglądał jak najlepiej. Bloger jest przecież jednocześnie pomysłodawcą, autorem treści, redaktorem naczelnym, wydawcą i…w sumie jest alfą i omegą swojego kawałka internetu, którym dzieli się z odbiorcami.

Kluczem do sukcesu jest odpowiednie dobranie i sformatowanie fontów dla witryny internetowej. Naczytałam się wielu mitów, na temat tego, jak dobierać kroje pisma. Chciałabym rozwiać wątpliwości i uporządkować wiedzę na temat typografii na blogach. Szczególnie że już kilka razy poruszałam go na swoich prelekcjach, tym bardziej przyda się podsumowanie tego zagadnienia na blogu.

Aha — pisząc font, mam na myśli „czcionkę”. Nie używam jednak tego terminu w odniesieniu do typografii wyświetlanej w internecie.

Klasyfikacja fontów

Sposobów na sklasyfikowanie krojów pisma jest wiele. Mogłabym zagłębić się w tym obszernym temacie, ale postanowiłam, że skupię się (na razie) tylko na kwestiach najważniejszych dla blogera. Podstawowe rodzaje krojów pisma są raczej wszystkim znane. Wyróżniamy fonty szeryfowe, bezszeryfowe i pisanki. To w dość dużym uproszczeniu, bo wchodząc bardziej w temat, wyróżnimy podziały wynikające z budowy, proporcji czy czasu powstania krojów pisma. W internecie nie jest to aż tak istotne, dużo ważniejsze są rodziny fontów, odmiany w rodzinach i ich używanie. Jak robić to dobrze?

1. Rodziny fontów i ich odmiany

Rodzina fontów to zestaw poszczególnych odmian danego kroju pisma. Na przykład, bardzo popularny font Lato, polskiego projektanta Łukasza Dziedzica, w rodzinie przeznaczonej do używania w internecie, ma aż 10 odmian. Przy dobrych fontach to standard, dlatego wybierajmy te kroje, które takie mają. Absolutnym minimum są wersje Regular – normalna, Italic – pochylona, Bold – gruba, Bold Italic – gruba pochylona. Ale im więcej, tym lepiej, bo mamy większe możliwości projektowe.

2. Sztuczne pogrubienia i pochylenia

Nie bez powodu powinniśmy wybierać fonty z jak największą liczbą odmian. Ma to znaczenie, kiedy stosujemy w treści pochylenia i pogrubienia. Używając ich, powinniśmy się upewnić, że używamy odmiany fontu, a nie sztucznego wymuszenia na nim pochyleń i pogrubień. Napisy wyglądają wtedy na „kopnięte”, zaburzona jest czytelność, prawidłowy odbiór tekstu i są one po prostu nieładne.

Przyglądając się budowie litery, która jest sztucznie pogrubiona (po lewej) wygląda ona, jakby po prostu został do niej dodany obrys. Oryginalne pogrubienie wygląda o wiele lepiej i czytelniej. Wyraźniejszy jest kontrast (po prawej) między sztucznym pochyleniem, a odmianą italic. Różnica w budowie oczka litery (o oczku napisałam niżej, w części dotyczącej rozmiarów) jest bardzo wyraźna.

3. Jak i kiedy stosować rodzaje oraz odmiany?

O fontach i ich stosowaniu na stronach www można naczytać się wielu nieścisłości typu: fonty szeryfowe powinny być używane w druku, a bezszeryfowe w internecie. Nic bardziej mylnego. Wiem nawet skąd wynika to błędne myślenie, w końcu rzadko kiedy książki pisane są Arial’em, w większości używany jest w nich przecież Times New Roman czy podobny font.

Prawda jest taka, że zarówno kroje z szeryfami, jak i bez fantastycznie nadają się do stosowania w treściach strony www! Trzeba je tylko dobrze zestawić oraz zastosować odpowiednie rozmiary, żeby były czytelne. A kiedy i jak stosować pochylenia, pogrubienia i pisanki?

Italic — font pochylony

Z reguły zarezerwowany dla cytatów (blockquote w CSS) i nazw własnych. Warto zwrócić uwagę, czy posiadamy w szablonie ostylowany blog cytatów, oraz czy wyświetlany w nim font jest wersją italic.

Bold — font pogrubiony

W akapicie stosujemy go chcąc położyć nacisk na kilka słów lub zdanie. Stosowanie pogrubienia w całym akapicie spowoduje,  że nie wyróżnimy niczego. Można też zastosować go dla nagłówków (h1, h2…).

Pisanki — fonty dekoracyjne

Kroje dekoracyjne, choć piękne, niestety nie nadają się do używania w treściach akapitowych. Natomiast świetnie sprawdzą się w nagłówkach. Prawda jest taka, że im ich mniej, tym lepiej. Stosowane w nadmiarze znikną, a mają być w treści bloga dosłownie akcentem, który doda szlachetnego wyglądu.

Wnioski

• spokojnie możemy stosować w treściach akapitowych zarówno fonty szeryfowe, jak i bezszeryfowe
• pisanki zostawmy dla wyróżnień, np. nagłówków, nie używajmy ich w tekstach akapitowych
• wybierajmy fonty, które mają w swojej rodzinie przynajmniej kilka odmian: Regular – normalna, Italic – pochylona, Bold – gruba, Bold Italic – gruba pochylona
• używanie odmian (bold, italic itd.) w wybranej rodzinie fontu, zamiast sztucznych pochyleń i pogrubień, wypływa pozytywny na odbiór tekstów
• sprawdźmy, czy w swoim szablonie mamy zaimplementowany font wraz z odmianami, oraz czy pochylone lub pogrubione elementy wyświetlają się nam prawidłowo (wiemy już jak to sprawdzić, dzięki rysunkowi różnic wyżej )

Łączenie krojów pisma

Z łączeniem fontów jest jak z dobieraniem kolorów. Wiele osób jest po prostu dobrymi kolorystami z natury, podobnie jest z typografią. Niektórzy mają niesamowitą płynność w zestawianiu ze sobą krojów pisma, innych trzeba naprowadzić na odpowiednie rozwiązania. Na szczęście znając kilka zasad, można zrobić to dobrze i osiągnąć świetny efekt.

1. Ilość fontów

W projektowaniu graficznym funkcjonuje zasada, że w jednym projekcie nie powinno się używać więcej niż dwóch/trzech krojów pisma. Im większa różnorodność, tym większa szansa na bałagan i stworzenie mało czytelnego designu. Żeby żonglować większą ilością fontów, trzeba mieć naprawdę dużą wiedzę o typografii. Dlatego też wybór fontu ogranicz do dwóch, maksymalnie trzech rodzin.

2. Zasada kontrastu

Łączenie fontów to nie jest sprawa łatwa. Istnieje jednak kilka wskazówek, które sprawią, że takie działanie nie zakończy się fiaskiem. Najważniejszą z nich jest dobieranie fontów, które ze sobą kontrastują. Najbardziej klasycznym zestawieniem jest zestawienie fontu szeryfowego z bezszeryfowym lub pisanki z szeryfowym/bezszeryfowym. Jeśli natomiast dobieramy dwa fonty tego samego rodzaju, czyli załóżmy, że zestawiamy dwa szeryfowe, to muszą się one od siebie znacznie różnić. W innym wypadku będzie to wyglądało na błąd, w którym coś nam się źle załadowało na stronie. Dotyczy to też oczywiście krojów bezszeryfowych i pisanek.

Wnioski

• nie stosujmy więcej niż dwa/trzy rodzaje fontów w projekcie
• łączmy ze sobą fonty, które kontrastują ze sobą wyglądem, np. dwa różne rodzaje: szeryfowe i bezszeryfowe
• jeśli łączymy kroje pisma tego samego rodzaju, postaramy się wybrać takie, które wyraźnie się od siebie różnią
• pomoc w umiejętnym łączeniu fontów można znaleźć oczywiście w sieci, bardzo fajne zestawienie stron, które pomogą w dobieraniu fontów, znajdziecie u Pauliny

Rozmieszczanie akapitów

Wyrównywanie tekstów i umieszczanie ich na tłach to kolejny temat, który dotyczy czytelności. W blogach spotykamy zarówno wąskie kolumny z treścią, jak i szerokie. Te drugie są szczególne, ponieważ z reguły zawierają duże ilości tekstu. W obu jednak stosowanie odpowiednich wyrównań i kontrastów, w przypadku używania na tłach, jest bardzo ważne.

1. Wyrównania

Wyrównanie do prawej, lewej, justowanie czy środkowanie? O tym pierwszym — zapomnijmy. Dla treści na blogu chorągiewka do prawej strony zupełnie się nie sprawdzi. Wytłumaczenie jest dość proste, w naszej kulturze czyta się od lewej strony, więc takie umieszczenie tekstów będzie wyglądać po prostu dziwnie.

Justowania w stronach internetowych trzeba używać niezwykle rozważnie. Wąskich kolumn w ogóle nie powinniśmy justować, bo robią się zbyt duże dziury między wyrazami. W szerokich kolumnach dopuszcza się justowanie, ale wszystko zależy od fontu. Dlatego też lepiej go unikać. Kontenery z tekstem są w większości responsywne, więc skalują się wraz z oknem przeglądarki, dlatego ciężko taki tekst okiełznać. W druku jest łatwiej, bo format jest stały i można też skorzystać z dzielenia wyrazów.

Idealnym rozwiązaniem jest stosowanie chorągiewki do lewej strony. To wyrównanie zawsze dobrze się sprawdzi i sprawi, że tekst będzie się lepiej czytało.

Pozostało nam środkowanie — moim zdaniem największa zbrodnia dla tekstów akapitowych. Jeśli nie piszesz wierszy w postach, nie stosuj tego typu wyrównania. Sprawdzi się jednak w nagłówkach i krótkich, wąskich kolumnach.

2. Kontrast

Widzieliście kiedyś książkę, która wydrukowana była białymi literami na czarnym tle? Ja też nie! To nieekonomiczne i… niezwykle nieczytelne. Jesteśmy przyzwyczajeni do czytania tekstów na białym tle i nie męczy ono naszego oka. Dlatego na stronach internetowych pod żadnym pozorem nie umieszczamy długich tekstów na ciemnych tłach. Unikajmy też zbyt małych kontrastów w doborze koloru tła do koloru fontu.

Na dwóch pierwszych przykładach widać, że jasny tekst na ciemnym tle i zbyt mało kontrastowe napisy względem tła, bardzo źle się czyta.

Wnioski

• teksty akapitowe wyrównuj do lewej strony
• wyśrodkowania zarezerwuj dla nagłówków, przycisków, formularzy
• unikaj justowania, a już szczególnie dla wąskich kolumn
• nie używaj ciemnego tła i jasnych liter dla bloków z dużą ilością treści

Rozmiary

Relacje w wielkości fontów między tekstem akapitowym a nagłówkami są niezwykle ważne. Tworzą one spójną strukturę witryny oraz jej hierarchię. Obie te rzeczy są niezwykle istotne, prowadzą czytelnika po stronie, dają mu znać co ważne lub ważniejsze, oraz informują gdzie jest początek i koniec. Jak więc dobrać wielkość napisów dla treści oraz nagłówków?

1. Teksty akapitowe

Zacznę od tego, czego jest najwięcej, czyli akapitów z treścią. Istnieje zasada mówiąca, a raczej sugerująca, że powinien on mieć rozmiar nie mniejszy niż 16 px. Wynika ona z tego, że przeglądanie witryn na smarftonach jest już standardem. W zawiązku z tym chcemy, żeby treść była czytelna na jak największej ilości urządzeń. Jest to też domyślny rozmiar tekstu w przeglądarkach.

Zgadzam się z tym, jak najbardziej, trzeba mieć jednak świadomość, że wartość ta nie jest sztywna i nie można brać jej za regułę. Powodem jest duża różnorodność w budowie krojów pisma. W wielu przypadkach trzeba zdać się na intuicję i dobre oko. Poniżej zobrazowałam wyjątki na przykładach. Fonty szeryfowe są wizualnie nieco mniejsze od krojów bezszeryfowych. Te pierwsze posiadają zakończenia liter w postaci kresek, zwanych właśnie szeryfami, i to one optycznie pomniejszają literę. Mogą też różnić się rozmiarem oczek (pustej przestrzeni wewnątrz litery), co powoduje, że fonty takiego samego rozmiaru wydają się być różnej wielkości.

Wnioski

• używajmy rozmiaru 16 px dla tekstów akapitowych (treści) na stronach i blogach
• przy krojach szeryfowych lub fontach o małych oczkach — warto zastanowić się nad nieco większym (o 2-4 piksele) rozmiarem fontu
• rozmiar fontu dla tekstu raczej nie powinien przekraczać 20 pikseli, większe rozmiary zarezerwujmy sobie dla nagłówków (o nich napisałam niżej)

Porównanie dwóch fontów o tej samej wielkości, bezszeryfowy Arial wydaje się być większy od szeryfowego kroju Georgia, jest to jednak tylko optyczne złudzenie.

Dwa różne kroje pisma z jednej odmiany (Medium) o tym samym rozmiarze. Różnica w wielkości oczek daje wrażenie, że Futura jest mniejsza od fontu Lato.

2. Nagłówki

Używanie nagłówków h1, h2… itd. jest przyjazne nie tylko dla SEO, ale również buduje wizualną harmonię treści witryny. Każda strona powinna zawierać nie więcej niż dedykowane sześć stylów nagłówków. Ich wielkości powinny być dobrane według skali typograficznej. Ta tradycyjna, w przypadku WWW wyrażona w pikselach, to: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. Używanie jej jest najbezpieczniejszym rozwiązaniem, ale można stworzyć też własną, która powstanie na potrzeby danego projektu. Powodem jest opisana wyżej, przy tekstach akapitowych, anatomia liter oraz oczywiście indywidualne podejście do projektowania. Jak zbudować taką skalę? Opiszę to na przykładzie klasycznej skali typograficznej.

Tradycyjna skala typograficzna znana jest nam między innymi z edytorów tekstu. Budując własną skalę typograficzną — wiele osób korzysta z ciągu Fibonacciego. Jest jeden ze sposobów na uzyskanie złotej proporcji

W witrynie mamy nagłówki od h1 do h6 oraz tekst akapitowy, oznaczany w CSS jako p. Jeśli dla treści [p] wybieramy rozmiar 16 px, o którym pisałam wyżej, to dla najmniejszego nagłówka h6 kolejny w ciągu jest rozmiar 18 px, później dla nagłówka h5 — rozmiar 21 px, itd., kończąc na h1, który będzie miał 60 px. Można oczywiście zacząć nadawanie nagłówkom rozmiaru od 21px. Jeszcze raz przypomnę, wszystko zależy od projektu, skala ma nam pomóc zachować w nim porządek, rytm i spójność.

Przykład dobrania wielkości nagłówków według tradycyjnej skali typograficznej.

Wnioski

• używajmy nagłówków dla tytułów postów, ale i w ich treściach, żeby zakomunikować hierarchię ważności w naszym tekście
• dobierając rozmiary nagłówków skorzystajmy ze skali, jeśli nie czujemy się jeszcze pewni w temacie typografii, to najlepszym i najbezpieczniejszym wyborem będzie tradycyjna skala typograficzna
• stosujmy nie więcej niż dedykowane sześć stylów nagłówków

3. Interlinia — odstępy między linijkami tekstu

Wartość równie ważna co rozmiar fontu (line-height w CSS). 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 wybrany font 16 px, interlinia będzie więc 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.

Porównanie różnych ustawień interlinii dla tekstu o rozmiarze 16 px.

Wnioski

• unikajmy automatycznej interlinii
• używajmy interlinii o połowę większej od wybranego przez nas rozmiaru dla kroju pisma

Gdzie szukać dobrych fontów?

Zawsze mówię, że są trzy drogi, ale ja przestawiam tylko  dwie, bo na tej trzeciej spotkamy… Comic Sans’a. Font, który już na zawsze będzie stał na podium, jako najbrzydszy na świecie. Jego zła „renoma” wynika z brzydoty, której ukryć się nie da. Sam font nie powstał po to, żebyśmy go dzisiaj używali. Dlaczego i czemu tak nienawidzimy tej pisanki i po co powstała, możecie posłuchać w tym krótkim filmiku:

1. Płatne czy darmowe?

Wróćmy do tematu fontów i dwóch dróg. Te dwie to: płatna i darmowa. Istnieje wiele stron oferujących możliwość zakupu fontów, np. myfonts.com. Chodzi tu głównie o klasyczne i znane kroje pisma, jak Helvetica czy Futura, które jeśli chcemy używać ich na stronie WWW, trzeba wykupić na nie licencję. Wśród płatnych fontów możemy wypatrzeć perełki, które nie powtórzą się w wielu miejscach. Właśnie z tego powodu, że twórcy chętniej korzystają z darmowych fontów. Jeśli o nich mowa, to Google Fonts lub Font Squirell oferują całą masę wspaniałych fontów, które można bezpłatnie zaimplementować na stronie.

2. Implementacja

Jeśli chodzi o implementację fontów, to na pewno najłatwiejsze będzie użycie tych, które oferuje Google Fonts. Osobiście rekomenduje to rozwiązanie, bo jest w czym wybierać. W bazie GF znajdziemy ponad 700 krojów. Ponadto łatwo możemy osadzić je sami, nawet jeśli jesteśmy laikami.

Jeśli skorzystamy z innej strony, która oferuje fonty do używania online, czy to darmowe, czy płatne, to wtedy implementacja odbywa się za pomocą reguły @font-face. Osadza ona kroje pisma, które posiadają do tego odpowiednią licencję. Jeśli średnio ogarniamy zaawansowane technologie, to do tej metody osadzania fontów przyda nam się już pomoc programisty.

3. O czym należy pamiętać wybierając fonty!

• Font, który wybieramy powinien mieć polskie znaki.
• Po implementacji sprawdźmy, czy na wszystkich przeglądarkach fonty na pewno dobrze nam się wyświetlają. Ja korzystam z Safari (wiele osób pomija sprawdzenie jak wygląda to w tej mało popularnej przeglądarce) i ciągle spotykam blogi (i małe, i duże), w których wszystko byłoby ok, ale brak polskich znaków, szczególnie w nagłówkach, po prostu razi.
• Sprawdź, czy font, który wybrałeś na stronie innej niż Googłe Fonts, posiada licencję do używania na stronach internetowych

Mam nadzieję, że wszystkie te informacje pomogą Wam w dobraniu na swoich blogach odpowiedniej typografii. Niedługo pojawią się na blogu kolejne artykuły, które będą częścią cyklu z lekcjami grafiki dla blogerów.

Artykuł Wszystko, co bloger powinien wiedzieć o fontach pochodzi z serwisu My Pink Plum!.

Postanowiliście, że sami wykonacie swoje zaproszenia ślubne i nie wiecie jakie są najlepsze czcionki do zaproszeń z polskimi znakami? Albo może poszukujesz fontu, który użyjesz na inną okoliczność — urodziny lub chrzciny? Sieć jest pełna różnych zestawień z pięknymi krojami pisma. Często jednak nie do końca te zestawienia są na tyle praktyczne, żeby być z nich w pełni zadowolonym, kiedy jest się laikiem. Dużo krojów nie posiada polskich znaków, a część z nich nie jest darmowa. Dlatego postanowiłam zrobić zbiór darmowych czcionek ozdobnych z polskimi znakami. Przydadzą się one zarówno osobom, które raz na jakiś czas tworzą coś „dla siebie”, oraz tym, którzy projektują częściej i lubią przeglądać tego typu zestawienia. Dodatkowo przygotowałam się kilka praktycznych porad dotyczących samego wybierania krojów pisma.

Słowo czcionka bardzo ciężko przechodzi mi przez gardło w odniesieniu do elektronicznego pliku, w którym zapisane są kroje pisma. Oczywiste jest, że mówiąc czcionka, nie mamy na myśli odlewu stopu drukarskiego (bo ten termin to oznacza). Większość osób potocznie nazywa tak fonty i nie ma w tym nic złego. Ja sama tego nie robię, i często o tym mówię, szczególnie kiedy posługuję się fachowym językiem, jak np. w moim artykule o typografii. Jednak ze względu na to, że wiele osób szuka ich pod hasłem czcionka, to używam tego sformułowania, żeby ułatwić poszukiwania. Szczególnie tym, którzy od czasu do czasu potrzebują jakichś informacji. I przy okazji wierzę, że ten, kto zajrzy tu w trakcie wybierania zestawu fontów do zaproszeń ślubnych, dowie się więcej w temacie typografii

Jak wybierać i stosować fonty ozdobne?

1. Takich, które nie są banalne! Pisałam kiedyś o krojach pisma, których należy unikać jak ognia. Jeśli szykujesz się do przygotowania zaproszenia ślubnego (lub z okazji innej okoliczności) samodzielnie, to zacznij od tej listy i zapamiętaj, których fontów nie używać.
2. Pamiętaj, że font musi mieć polskie znaki! Nie ma nic gorszego niż zaproszenie wypisane ładnym, odręcznym krojem, a gdzie polskie litery ą czy ę podmienione są na inny krój, który takie posiada. Zresztą zobaczcie sami:
   Mi się aż serce kraja, kiedy widzę takie zaproszenie, list lub, co jest dla mnie absolutnie niedopuszczalne – kartkę menu w restauracji. Dlatego w moim zestawieniu znajdziecie tylko odręczne czcionki z polskimi znakami.
3. Jeśli decydujesz się na poszukiwania darmowych, to zwróć uwagę na licencję. Dużo fontów jest dostępne dla użytku własnego, więc jeśli robisz coś dla siebie, to oczywiście nie ma problemu. Jeśli natomiast przygotowujesz coś komercyjnie, to autorzy w plikach z fontem (często zapakowane w paczka RAR i ZIP) udostępniają informacje jak i gdzie kupić licencję.
4. Nie wybieraj fontów nieczytelnych do całych akapitów. Może się okazać, że obdarowany zaproszeniem… po prostu go nie rozczyta. Dlatego niektóre fonty trzeba używać tylko w nagłówkach, mogą być nimi wypisane np. imiona Państwa Młodych czy inne, krótkie informacje, które chcemy wyróżnić.
   Spróbuj przeczytać wszystkie teksty i porównać czytelność. Zbyt gruby lub za bardzo ozdobny font ustawiony na tekst zaproszenia może okazać się trudny do czytania (po lewej). Jeśli wybierzesz grubszą pisankę, użyj jej w elementach (po prawej). Dla całych tekstów wybierz czcionkę, którą przeczytasz bez problemu.

Najlepsze czcionki do zaproszeń z polskimi znakami

Skoro wiesz już jak dobrać odpowiedni krój pisma, to czas na listę, którą przygotowałam
Znajduje się na niej 21 eleganckich, odręcznych i darmowych czcionek.

1. Allura 
   
2. Great Vibes
   
3. Miama
   
4. Parisienne
   
5. Clicker Script
   
6. Mochary
   
7. Raven Script
   
   
8. Coneria Script
   
9. Crunchy
   
10. Cheddar Jack
    
11. KG Eyes Wide Open
    
12. Sverige Script
    
13. Before the Rain
    
14. Maridian
    
15. Janda Stylish Script
    
16. Canela Bark
    
17. Respective
    
18. Castro Script
    
19. Qaskin
    
20. Quicker
    
21. US Declaration
    

Mam nadzieję, że moje porady oraz lista fontów
będą przydatne i przypadły Wam do gustu!

Enjoy!!

Artykuł Najlepsze czcionki do zaproszeń z polskimi znakami pochodzi z serwisu My Pink Plum!.

Wybór fontów imitujących pismo odręczne jest olbrzymi. Pisałam o tym całkiem niedawno. Poza listą bezpłatnych krojów pisma z polskimi znakami w tym stylu, przygotowałam tez kilka porad, jak ich używać. Często wraz z fontami ozdobnymi pojawia się pytanie — jak dodawać do nich ozdobniki, czyli elementy kaligraficzne. Takie „wywijaski” przy literach urozmaicają grafiki z typografią, ale trzeba umieć z nimi pracować i znać umiar. Dodatkowo też musicie wiedzieć, że fonty posiadające takie rozszerzenia, są w większości płatne (szczególnie jeśli chcemy mieć dużą ilość elementów). Nie ma jednej metody ich implementacji, ale przybliżę dwie, które są najwygodniejsze i najbardziej estetyczne.

Zacznę od najważniejszej informacji, która będzie kluczowa z tym poradniku: wiele fontów nie ma dodatkowych elementów kaligraficznych i jeśli chcecie je do wybranego kroju pisma dodać, to lepiej zmieńcie font na taki, który ma w swoim rozszerzeniu ozdobniki. Macie wtedy gwarancję, że będą one dopasowane stylem oraz grubością kreski i nie będą wyglądać sztucznie. W innym wypadku trzeba mieć naprawdę olbrzymie wyczucie i umiejętności w zakresie typografii, żeby uzyskać naturalny efekt w foncie, który nie jest rozbudowany o takie zdobienia. Ozdobniki są wykazane tablicach znaków, kiedy na  (dobrych!) stronach, z których je pobieracie. Spakowane są w paczce fontów, instalują się jako osobne pliki. Przykłady pokazałam niżej.

Ozdobniki kaligraficzne w fontach odręcznych

W gotowych plikach z fontami możemy spotkać dwa rodzaje plików z ozdobnikami:

1. Fonty z osobnymi elementami kaligraficznymi, które należy ręcznie dopasować do liter
2. Alfabety posiadające w swoich zasobach gotowe litery kaligraficzne

Użycie obu rozwiązań technicznie nie jest takie trudne, projektowo jest to już jednak wyzwanie! Ich wybór nie zależy od nas, a od twórców danego kroju pisma. Jeśli miał taki zamysł, że elementy kaligraficzne wkomponował w litery, to będzie nam się szybciej pracowało. Kiedy są one osobno, i musimy dodać je ręcznie, mamy za to większą elastyczność w używaniu dekoracji. Obie metody dopasowania mają swoje wady i zalety, opisałam je oczywiście niżej.

1.

Fonty z osobnymi elementami kaligraficznymi

Przykładowy font, który posiada osobne ozdobniki i litery, możecie zobaczyć poniżej. Jest to krój pisma Madina. W przypadku kroju takiego jak ten, należy dodać „wywijasa” już po przygotowaniu napisu. Można to zrobić za pomocną dowolnego programu graficznego, jak Photoshop czy Gimp.

Krój pisma Madina Script

UWAGI:

—> Po zainstalowaniu, na liście krojów pisma, elementy kaligraficzne pojawiają się jako osobny font:

—> Każdy z nich ma przypisaną literę:

Zaleta:

• możemy dopasować dowolny element do dowolnej litery, ponieważ nie ma sztywno przypisanych do litery ozdobników, dzięki temu osiągamy różnorodne, nieszablonowe efekty

Wada:

• pracochłonność, ponieważ elementy dekoracyjne trzeba ustawić ręcznie

2.

Fonty z gotowymi literami kaligraficznymi

Wygodniejsza metoda, bo nie musimy dopasowywać już ozdobników. Są one gotowe i używa się ich jako osobny font. Jeśli trafimy na dobry krój pisma, który ma sporo wersji, to mamy więcej możliwości projektowych. W przykładzie niżej pokazałam krój Bellwethaers. Ma on w swojej rodzinie ma wersje z krótkimi, długimi, bardzo długimi i zawijanymi literami!

Krój pisma Bellwethaers

—> Po zainstalowaniu, na liście krojów pisma, elementy kaligraficzne pojawiają się jako osobny font:

—> Każdy z nich ma obustronnie przypisaną literę, gdzie np. mała litera wywija w lewo, a duża w prawo

Zaleta:

• szybki efekt — dzięki temu, że mamy gotowe litery, nie tracimy czasu na dopasowanie do nich elementów kaligraficznych

Wada:

• brak elastyczności w dopasowaniu elementów kaligraficznych, nie można ustawić ich ręcznie w edycji fontu, a jedynie przy manipulacji „krzywymi”

Dodatkowo

Oczywiście możecie też skorzystać z paczek z ozdobnikami, które nie należą do żadnych fontów. Znajdziecie takie na stronach typu Creative Market. Jest to najtrudniejsza droga, bo tak jak wspomniałam wyżej, wymaga sporych umiejętności i wyczucia. Sama czasem korzystam z takich dopasowań, ale znacznie bardziej wolę fonty z gotowymi rozszerzeniami kaligraficznymi, bo łatwiej jest zachować naturalność liter.

Jakie darmowe kroje posiadają rozszerzenia kaligraficzne? Możecie sprawdzić np.  Sverige Script, Before the Rain lub Some Weatz, i na nich przećwiczyć dodawanie ozdobników. Samo ich używanie nie wystarczy, żeby robić śliczne grafiki. Trzeba trochę poćwiczyć, żeby osiągnąć zadowalające efekty, obejrzeć sporo inspiracji, a i umiejętność projektowania nie jest tu bez znaczenia. Warto pamiętać o zasadzie: mniej znaczy więcej!

Enjoy!!

Artykuł Ozdobniki kaligraficzne w fontach odręcznych pochodzi z serwisu My Pink Plum!.

Często powtarzam, że liter trzeba używać rozważnie. Zawsze też przypominam, że tworząc teksty i redagując je dbamy o stylistykę, ortografię, interpunkcję itd. Żeby ten profesjonalizm był dopięty na ostatni guzik, powinniśmy dopracować każdy szczegół, również w od strony wizualnej dotyczącej typografii. Post z absolutnie wszystkim, co bloger powinien wiedzieć o fontach, niesamowicie „poniósł się” po sieci. Cieszę się z tego jak wariatka!

Co zrobić, żeby napisy na grafikach i zdjęciach były jak najlepsze oraz jakich błędów nie popełniać? Zebrałam 7, które spotykam najczęściej. I mimo, że mam ochotę krzyczeć jak je widzę, to tutaj spokojnie wyjaśnię Wam czego nie powinniście robić literom, kiedy tworzycie napisy.

Zbyt przerysowany cień

Kole w oczy i sprawia, że aż zęby zgrzytają! Cień pod napisami intensywnością powinien być oczywiście dobrany do rodzaju tła, ale przerysowany na bieli, jest po prostu nie do zniesienia. Balansujmy ostrożnie nie tylko rozmiarem i odległością, ale również kryciem.

Brak polskich znaków

O mamuniu, jak ja tego nie znoszę! Czy już wszyscy sprawdzili u siebie na blogach i stronach poprawne działanie fontów z polskimi znakami? Powtarzam, jako użytkownik niezbyt popularnego Safari, że ciągle spotykam się ze stronami gdzie font jest nie do końca dobrze zaimplementowany. Sprawdźcie działanie swojej witryny w KAŻDEJ przeglądarce. Na grafikach, które tworzymy w programie graficznym można to kontrolować i dodać polskie znaki samemu, ale co do tego… Spójrz punkt niżej

Polskie znaki z przecinków

Boli, boli i jeszcze raz boli. Znaków diakrytycznych (czyli ogonków w ą, ę, ś, ć itd.) nie tworzymy dodając PRZECINKI. Tworzy się je z części liter, zgrabnie je wycinając, żeby pasowały do stylu danego fontu. Tym, którzy jeszcze nie działają na tyle płynnie w np. Photoshopie, a chcą nauczyć się tworzyć naprawdę dobrą typografię, polecam zacząć od fontów, które jednak polskie znaki posiadają. Albo pisać w języku angielskim Mam też małą podpowiedź do ogonków dla Ś czy Ć. Często w zestawie fontów, które nie mają polskich liter znajdziemy Ó, możemy wtedy „pożyczyć” od niej ogonek i dodać do S lub C. Z ogonkami dolnymi ą czy ę jest trochę trudniej. Może za jakiś czas uda mi się przygotować o tym tutorial.

Sztuczne pochylenie

Też już o tym pisałam, we wspomnianym wyżej artykule o fontach. Żeby używać pochylonego napisu, profesjonalnie mówi się na niego „w wersji italic”, trzeba najpierw sprawdzić czy dany font w ogóle posiada taką odmianę. Zwróć uwagę na napisy pochyl się powyżej. Ten po lewej stronie wygląda płynnie, litery zostały specjalnie zaprojektowane, żeby pochylenie wyglądało ładnie i naturalnie. Natomiast po prawej mamy pochylenie wymuszone, gdzie napis wygląda tak samo jak w wersji zwykłej, ale jakby był „kopnięty”. Żeby nie robić takiego sztucznego pochylenia należy wybierać odmianę fontu, pokazane jest to poniżej. Ikonkę zaznaczoną na czerwono starajcie się unikać.

Sztuczne pogrubienie

To samo co pochylenia dotyczy pogrubienia. Automatyczne jego dodanie, z ikonki zaznaczonej niżej na czerwono, to tylko obrys do wersji regularnej, który deformuje literę. Prawidłowa wersja bold, czyli pogrubiona, to specjalnie zaprojektowana odmiana, która może też występować w kilku wariantach np. extra bold.

Zbyt dużo fontów

Dobieranie kilku rodzajów fontów na jednej grafice to już wyższa szkoła jazdy. Naprawdę! Żeby żonglować różnymi rodzajami krojów pisma i mieszać je ze sobą, trzeba mieć spore umiejętności i doświadczenie. Dlatego oczy mi krwawią(!), jak czasem gdzieś spotykam plakaty lub kartki do pobrania, w których pojawiają się takie mieszanki wybuchowe Jak zaradzić nieumiejętnemu dobieraniu fontów? Przede wszystkim jest taka złota zasada, żeby dobierać ze sobą nie więcej niż dwa kroje pisma. Wtedy to zadziała, uwierzcie mi Tutaj znajdziecie niesamowitą pomoc z tym temacie.

DEFORMACJA

Ha! Wyobraźcie sobie, że fonty tworzone są z niesamowitą starannością, niektórzy poświęcają im całe życie! Na przykład taka Helvetica (swoją drogą, polecam film o tej samej nazwie), ma całą masę odmian. Wąskie, szerokie, grube, chude. Jest w czym wybierać. Dlatego nie ma żadnej potrzeby, żeby dokonywać na fontach deformacji. W Photoshopie jest takie miejsce jak zmiana % wysokości i szerokości, której, w mojej opinii, powinniśmy unikać jak tylko się da. Przydaje się naprawdę w niewielu przypadkach. Zaznaczyłam ją aż 3 X, żeby podkreślić istotę zmieniania rozmiarów fontów za pomocą zaznaczonej na zielono opcji. Najlepiej też unikać CTRL+T, bo przypadkiem palec zsunie się z SHIFTa (zachowującego proporcje) i bach… deformacja gotowa!

Szanujcie litery, zasłużyły na to <3
Mam nadzieję, że moje porady Wam się przydadzą!

Enjoy!!

Artykuł Błędy w tworzeniu napisów na zdjęcia lub grafiki pochodzi z serwisu My Pink Plum!.

Wiecie, że nie cierpię zaczynać czegoś „od pierwszego”? Czy to roku, czy miesiąca, nawet od poniedziałku. Jak można coś zaczynać od pierwszego!? To czysty przypadek, że dziś, 1 września, przychodzę do Was z czymś ZUPEŁNIE nowym. Na przekór moim przekonaniom! Po prostu nie mogę uwierzyć, ale stało się i… Od teraz będę do Was więcej mówić! Pisać oczywiście również, bo blog to największy kawałek mojego serca. Nadszedł jednak czas, w którym zdecydowałam, że stanę przed kamerą i nagram video. Kochani, mój kanał na YT możemy uznać oficjalnie za otwarty! Dużo łatwiej będzie mi jednocześnie pokazywać i opisywać Photoshopowe triki, a co najważniejsze, będą one łatwiejsze w odbiorze.

Ogromnie się stresuję premierowym odcinkiem! Pamiętajcie, że każda łapka w górę pod filmem, uprzejmy komentarz i subskrypcja kanału są mile widziane oraz szalenie motywujące. Do kamery przyzwyczajam się od jakiegoś czasu. W sensie tej w komórce. Efekty możecie zobaczyć codziennie na moim Instagram stories. Z tą różnicą, że wideo są i będą coraz bardziej profesjonalne na jutubowym kanale.

A o czym jest pierwszy film? W tutorialu wyjaśniam krok po kroku jak zrobić napis ze złotych liter w Photoshopie. Jest to naprawdę proste, a metodę zdarzało mi się już pokazywać m.in. w poście jak zrobić zdjęcie w kształcie liter. Mam też ekstra niespodziankę — udostępniam tekstury złotych folii, które są niezbędne do zrobienia napisów. Pobrać je oraz obejrzeć tutorial możecie niżej. Zapraszam

Linki do pobrania

WZÓR 1 ZŁOTKA    WZÓR 2 ZŁOTKA

WZÓR 3 ZŁOTKA    WZÓR 4 ZŁOTKA

Projekty są jest gotowe do pobrania wyżej. Wystarczy wybrać wzór i zapisać plik.

• Nie zmieniam wzorów na życzenie — nie piszcie do mnie w tej sprawie wiadomości, udostępnione grafiki są jedynymi ich wersjami
• Grafiki przygotowane są do druku w wysokiej jakości
• Pliki zapisane są w formacie JPG
• Można z nich korzystać tylko dla własnego użytku (również na blogach i ich fanpage’ach), nie sprzedawajcie ich w żadnej postaci!

Jeśli grafiki i filmik Wam się podobają, to będzie mi bardzo miło jeśli je udostępnicie,
aby Wasi bliscy oraz znajomi też mogli się nimi cieszyć!

Enjoy!!

Artykuł Jak zrobić złoty napis w Photoshop’ie pochodzi z serwisu My Pink Plum!.

Używanie ścieżek w Photoshopie na niezwykle szerokie zastosowanie i łączy się z całą masą funkcji. Między innymi z tekstem. Jakiś czas temu pokazywałam na YT jak zrobić teksty „wygibasy”, czyli uzyskiwanie wygiętego napisu. W dzisiejszym filmiku wyjaśniam jak zrobić napis po okręgu w programie Adobe Photoshop. Zarówno po jego wewnętrznej, jak i zewnętrznej krawędzi. Pokazuję również jak działa narzędzie Tekst, kiedy chcemy wpisać sobie akapit do środka kształtu. To bardzo prosta metoda, a na pewno ułatwi Wam wiele działań. Dokładnie tak samo tworzy się tekst po kwadratach, prostokątach, trójkątach i wszelakich kształtach.

Jak zrobić napis po okręgu?

Ważne informacje:

• pracuję w programie Adobe Photoshop 2017
• jest to program płatny, możecie go kupić na adobe.com — są tu wszystkie ceny i napisanie do mnie nie spowoduje, że program będzie tańszy
• studenci, uczniowie i nauczyciele mogą skorzystać ze zniżek, szczegóły są na stronie firmy Adobe

Enjoy!!

Artykuł Tekst po okręgu w Photoshopie pochodzi z serwisu My Pink Plum!.

Rysowanie piórkiem w Photoshopie to jedna z najbardziej podstawowych funkcji. Zresztą, nie tylko w nim. Jest to również jedno najważniejszych narzędzi, które znajdziecie w programach do grafiki wektorowej, jak np. Adobe Illustrator czy Corel Draw. Służy ono do rysowania własnych kształtów. Naukę jego obsługi zawsze polecam zacząć od prób odrysowywania obiektów ze zdjęcia. Świetnie sprawdzą się tu zwierzęta lub owady (np. motyl). Pamiętajcie — praktyka czyni mistrza!

Jak zrobić logo?

W tym tutorialu wyjaśniam jak odrysować ze zdjęcia sylwetkę kota. Jest to jednocześnie odpowiedź na jedno z najczęściej zadawanych mi pytań — jak zrobić logo, które będzie zbudowane z własnego symbolu. Uzupełniam go o tekst napisany po okręgu, do którego instrukcję przygotowałam już jakiś czas temu.

Ważne informacje:

• pracuję w programie Adobe Photoshop 2017
• jest to program płatny, możecie go kupić na adobe.com — są tu wszystkie ceny i napisanie do mnie nie spowoduje, że program będzie tańszy
• studenci, uczniowie i nauczyciele mogą skorzystać ze zniżek, szczegóły są na stronie firmy Adobe

Zaczynamy!

Dajcie znać w komentarzach czy film Wam pomógł!

Enjoy!!

Artykuł Jak zrobić logo? Odrysowywanie kształtów — Photoshop pochodzi z serwisu My Pink Plum!.

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.

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ż wersaliki¹) 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.²

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.³ 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.⁴ 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.⁵

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

____

¹ The Smashing Book #1 Edycja polska, Helion 2013, s. 63
² Ibidem, s. 98
³ Ibid., s. 100
⁴ Ib., s. 60
⁵ Ib., s. 61

Artykuł 6 najczęstszych błędów w formatowaniu treści pochodzi z serwisu My Pink Plum!.

Ozdobniki kaligraficzne do krojów pisma, które imitują pismo odręczne, biją ostatnio rekordy popularności. Kiedy pierwszy raz opublikowałam dla Was grafikę, zawierającą takie „wywijaski przy literach”, a był to plakat Rób to, co kochasz z paczki plakatów motywacyjnych, zalała mnie fala pytań jak rozwinęłam napisy o te piękne zdobienia. Wiele fontów oferuje dekoracyjne wykończenia do liter, jednak z reguły są to kroje płatne. Pomyślałam, że podejmę wyzwanie i poszukam darmowych fontów, które świetnie nadadzą się dla osób dopiero zaczynających zabawę z typografią. Wiem, że wielu z Was chciałoby popróbować tworzenia różnego rodzaju grafik z typografią. Mam nadzieję, że teraz dzięki mnie, będziecie mogli zrobić takie grafiki też dla siebie.

JAK DODAWAĆ OZDOBNIKI DO LITER

Dodawanie ozdobników jest dość proste i można je robić na dwa sposoby. Cały poradnik na ten temat już kiedyś pojawił się na blogu. Generalnie idea jest taka, że fonty albo mają wpisane elementy dekoracyjne w litery, albo trzeba je dodawać do napisów ręcznie. W wybranych przeze mnie niżej krojach pisma wszystkie ozdobniki są osobnymi symbolami, które zwykle wpisane pod np. znakami nawiasu albo plusa, i trzeba je do napisów dopasować samemu. Każdy krój pisma, pod linkami gdzie możecie je pobrać, ma wypisane znaki do których przypisane są „wywijaski”.

Dla przykładu w kroju pisma shorelines jest tak, że zawiera on 6 ozdobninków, które znajdują się pod znakami nawiasów ( ), kwadratowych nawiasów [ ] oraz slasha i backslasha / \. Zresztą, zobaczcie sami:

 DARMOWE FONTY DO POBRANIA

1. shorelines (6 ozdobników)

2.  Some Weatz (9 ozdobników)

3. Ail et fines herbes (2 ozdobniki)

4. Lilly Belle (4 ozdobniki)

5. Sverige Script (10 ozdobników)

6. Lydia Puente (1 ozdobnik)

INSTALACJA I UŻYWANIE

• Przeczytaj licencje fontów! Są one dołączane do pobranych pików lub są podane na stronach z których je pobierasz oraz na stronach ich autorów.

• Pliki instalujesz na komputerze, a nie w konkretnym programie, dlatego po instalacji w systemie będą one działały w każdym z programów.

• Każdy z tych fontów ma ozdobniki pod innymi znakami, dlatego zobacz tablice znaków na stronach do pobrania plików, żeby wiedzieć których użyć, żeby „wywijaski” działały poprawnie

Udanej zabawy!

Artykuł 6 darmowych fontów z ozdobnikami pochodzi z serwisu My Pink Plum!.

Jeśli można powiedzieć, że na czymś “zjadło się zęby”, to ja zrobiłam to, projektując witryny internetowe. Zawodowo zajmuję się web designem od niemal 10 lat. Dzięki temu mam szerokie doświadczenie i wiem o wizualnych aspektach publikacji internetowych rzeczy, których nie znajdziecie w typowych poradnikach. Dlaczego? Po pierwsze — moja wiedza to efekt wieloletniej praktyki, a po drugie, miałam zaszczyt uczyć się projektować od wspaniałych twórców. Między innymi od Ani Kłos, która prowadzi bloga o sztuce i designie — Retroavangarda. Ania jest doktorem sztuki, ma przeogromną wiedzę na temat projektowania graficznego i pisze jedyne w swoim rodzaju, unikalne treści, których nie znajdziecie nigdzie indziej.

W tym poście chciałabym przybliżyć Wam temat typografii na stronach internetowych. Wyjątkowy, bo z naciskiem na blogi. Jako twórcy tekstów wyświetlanych online, dbamy o stylistykę, ortografię, interpunkcję, czy ładne, dobrane fotografie. To oznaka profesjonalizmu, świadcząca o wysokiej jakości treści. W idealnym modelu powinniśmy zadbać również o to, żeby napisany przez nas artykuł wyglądał jak najlepiej. Bloger jest przecież jednocześnie pomysłodawcą, autorem treści, redaktorem naczelnym, wydawcą i…w sumie jest alfą i omegą swojego kawałka internetu, którym dzieli się z odbiorcami.

Kluczem do sukcesu jest odpowiednie dobranie i sformatowanie fontów dla witryny internetowej. Naczytałam się wielu mitów, na temat tego, jak dobierać kroje pisma. Chciałabym rozwiać wątpliwości i uporządkować wiedzę na temat typografii na blogach. Szczególnie że już kilka razy poruszałam go na swoich prelekcjach, tym bardziej przyda się podsumowanie tego zagadnienia na blogu.

Aha — pisząc font, mam na myśli “czcionkę”. Nie używam jednak tego terminu w odniesieniu do typografii wyświetlanej w internecie.

Klasyfikacja fontów

Sposobów na sklasyfikowanie krojów pisma jest wiele. Mogłabym zagłębić się w tym obszernym temacie, ale postanowiłam, że skupię się (na razie) tylko na kwestiach najważniejszych dla blogera. Podstawowe rodzaje krojów pisma są raczej wszystkim znane. Wyróżniamy fonty szeryfowe, bezszeryfowe i pisanki. To w dość dużym uproszczeniu, bo wchodząc bardziej w temat, wyróżnimy podziały wynikające z budowy, proporcji czy czasu powstania krojów pisma. W internecie nie jest to aż tak istotne, dużo ważniejsze są rodziny fontów, odmiany w rodzinach i ich używanie. Jak robić to dobrze?

1. Rodziny fontów i ich odmiany

Rodzina fontów to zestaw poszczególnych odmian danego kroju pisma. Na przykład, bardzo popularny font Lato, polskiego projektanta Łukasza Dziedzica, w rodzinie przeznaczonej do używania w internecie, ma aż 10 odmian. Przy dobrych fontach to standard, dlatego wybierajmy te kroje, które takie mają. Absolutnym minimum są wersje Regular – normalna, Italic – pochylona, Bold – gruba, Bold Italic – gruba pochylona. Ale im więcej, tym lepiej, bo mamy większe możliwości projektowe.

2. Sztuczne pogrubienia i pochylenia

Nie bez powodu powinniśmy wybierać fonty z jak największą liczbą odmian. Ma to znaczenie, kiedy stosujemy w treści pochylenia i pogrubienia. Używając ich, powinniśmy się upewnić, że używamy odmiany fontu, a nie sztucznego wymuszenia na nim pochyleń i pogrubień. Napisy wyglądają wtedy na “kopnięte”, zaburzona jest czytelność, prawidłowy odbiór tekstu i są one po prostu nieładne.

Przyglądając się budowie litery, która jest sztucznie pogrubiona (po lewej) wygląda ona, jakby po prostu został do niej dodany obrys. Oryginalne pogrubienie wygląda o wiele lepiej i czytelniej. Wyraźniejszy jest kontrast (po prawej) między sztucznym pochyleniem, a odmianą italic. Różnica w budowie oczka litery (o oczku napisałam niżej, w części dotyczącej rozmiarów) jest bardzo wyraźna.

3. Jak i kiedy stosować rodzaje oraz odmiany?

O fontach i ich stosowaniu na stronach www można naczytać się wielu nieścisłości typu: fonty szeryfowe powinny być używane w druku, a bezszeryfowe w internecie. Nic bardziej mylnego. Wiem nawet skąd wynika to błędne myślenie, w końcu rzadko kiedy książki pisane są Arial’em, w większości używany jest w nich przecież Times New Roman czy podobny font.

Prawda jest taka, że zarówno kroje z szeryfami, jak i bez fantastycznie nadają się do stosowania w treściach strony www! Trzeba je tylko dobrze zestawić oraz zastosować odpowiednie rozmiary, żeby były czytelne. A kiedy i jak stosować pochylenia, pogrubienia i pisanki?

Italic — font pochylony

Z reguły zarezerwowany dla cytatów (blockquote w CSS) i nazw własnych. Warto zwrócić uwagę, czy posiadamy w szablonie ostylowany blog cytatów, oraz czy wyświetlany w nim font jest wersją italic.

Bold — font pogrubiony

W akapicie stosujemy go chcąc położyć nacisk na kilka słów lub zdanie. Stosowanie pogrubienia w całym akapicie spowoduje,  że nie wyróżnimy niczego. Można też zastosować go dla nagłówków (h1, h2…).

Pisanki — fonty dekoracyjne

Kroje dekoracyjne, choć piękne, niestety nie nadają się do używania w treściach akapitowych. Natomiast świetnie sprawdzą się w nagłówkach. Prawda jest taka, że im ich mniej, tym lepiej. Stosowane w nadmiarze znikną, a mają być w treści bloga dosłownie akcentem, który doda szlachetnego wyglądu.

Wnioski

• spokojnie możemy stosować w treściach akapitowych zarówno fonty szeryfowe, jak i bezszeryfowe
• pisanki zostawmy dla wyróżnień, np. nagłówków, nie używajmy ich w tekstach akapitowych
• wybierajmy fonty, które mają w swojej rodzinie przynajmniej kilka odmian: Regular – normalna, Italic – pochylona, Bold – gruba, Bold Italic – gruba pochylona
• używanie odmian (bold, italic itd.) w wybranej rodzinie fontu, zamiast sztucznych pochyleń i pogrubień, wypływa pozytywny na odbiór tekstów
• sprawdźmy, czy w swoim szablonie mamy zaimplementowany font wraz z odmianami, oraz czy pochylone lub pogrubione elementy wyświetlają się nam prawidłowo (wiemy już jak to sprawdzić, dzięki rysunkowi różnic wyżej )

Łączenie krojów pisma

Z łączeniem fontów jest jak z dobieraniem kolorów. Wiele osób jest po prostu dobrymi kolorystami z natury, podobnie jest z typografią. Niektórzy mają niesamowitą płynność w zestawianiu ze sobą krojów pisma, innych trzeba naprowadzić na odpowiednie rozwiązania. Na szczęście znając kilka zasad, można zrobić to dobrze i osiągnąć świetny efekt.

1. Ilość fontów

W projektowaniu graficznym funkcjonuje zasada, że w jednym projekcie nie powinno się używać więcej niż dwóch/trzech krojów pisma. Im większa różnorodność, tym większa szansa na bałagan i stworzenie mało czytelnego designu. Żeby żonglować większą ilością fontów, trzeba mieć naprawdę dużą wiedzę o typografii. Dlatego też wybór fontu ogranicz do dwóch, maksymalnie trzech rodzin.

2. Zasada kontrastu

Łączenie fontów to nie jest sprawa łatwa. Istnieje jednak kilka wskazówek, które sprawią, że takie działanie nie zakończy się fiaskiem. Najważniejszą z nich jest dobieranie fontów, które ze sobą kontrastują. Najbardziej klasycznym zestawieniem jest zestawienie fontu szeryfowego z bezszeryfowym lub pisanki z szeryfowym/bezszeryfowym. Jeśli natomiast dobieramy dwa fonty tego samego rodzaju, czyli załóżmy, że zestawiamy dwa szeryfowe, to muszą się one od siebie znacznie różnić. W innym wypadku będzie to wyglądało na błąd, w którym coś nam się źle załadowało na stronie. Dotyczy to też oczywiście krojów bezszeryfowych i pisanek.

Wnioski

• nie stosujmy więcej niż dwa/trzy rodzaje fontów w projekcie
• łączmy ze sobą fonty, które kontrastują ze sobą wyglądem, np. dwa różne rodzaje: szeryfowe i bezszeryfowe
• jeśli łączymy kroje pisma tego samego rodzaju, postaramy się wybrać takie, które wyraźnie się od siebie różnią
• pomoc w umiejętnym łączeniu fontów można znaleźć oczywiście w sieci, bardzo fajne zestawienie stron, które pomogą w dobieraniu fontów, znajdziecie u Pauliny

Rozmieszczanie akapitów

Wyrównywanie tekstów i umieszczanie ich na tłach to kolejny temat, który dotyczy czytelności. W blogach spotykamy zarówno wąskie kolumny z treścią, jak i szerokie. Te drugie są szczególne, ponieważ z reguły zawierają duże ilości tekstu. W obu jednak stosowanie odpowiednich wyrównań i kontrastów, w przypadku używania na tłach, jest bardzo ważne.

1. Wyrównania

Wyrównanie do prawej, lewej, justowanie czy środkowanie? O tym pierwszym — zapomnijmy. Dla treści na blogu chorągiewka do prawej strony zupełnie się nie sprawdzi. Wytłumaczenie jest dość proste, w naszej kulturze czyta się od lewej strony, więc takie umieszczenie tekstów będzie wyglądać po prostu dziwnie.

Justowania w stronach internetowych trzeba używać niezwykle rozważnie. Wąskich kolumn w ogóle nie powinniśmy justować, bo robią się zbyt duże dziury między wyrazami. W szerokich kolumnach dopuszcza się justowanie, ale wszystko zależy od fontu. Dlatego też lepiej go unikać. Kontenery z tekstem są w większości responsywne, więc skalują się wraz z oknem przeglądarki, dlatego ciężko taki tekst okiełznać. W druku jest łatwiej, bo format jest stały i można też skorzystać z dzielenia wyrazów.

Idealnym rozwiązaniem jest stosowanie chorągiewki do lewej strony. To wyrównanie zawsze dobrze się sprawdzi i sprawi, że tekst będzie się lepiej czytało.

Pozostało nam środkowanie — moim zdaniem największa zbrodnia dla tekstów akapitowych. Jeśli nie piszesz wierszy w postach, nie stosuj tego typu wyrównania. Sprawdzi się jednak w nagłówkach i krótkich, wąskich kolumnach.

2. Kontrast

Widzieliście kiedyś książkę, która wydrukowana była białymi literami na czarnym tle? Ja też nie! To nieekonomiczne i… niezwykle nieczytelne. Jesteśmy przyzwyczajeni do czytania tekstów na białym tle i nie męczy ono naszego oka. Dlatego na stronach internetowych pod żadnym pozorem nie umieszczamy długich tekstów na ciemnych tłach. Unikajmy też zbyt małych kontrastów w doborze koloru tła do koloru fontu.

Na dwóch pierwszych przykładach widać, że jasny tekst na ciemnym tle i zbyt mało kontrastowe napisy względem tła, bardzo źle się czyta.

Wnioski

• teksty akapitowe wyrównuj do lewej strony
• wyśrodkowania zarezerwuj dla nagłówków, przycisków, formularzy
• unikaj justowania, a już szczególnie dla wąskich kolumn
• nie używaj ciemnego tła i jasnych liter dla bloków z dużą ilością treści

Rozmiary

Relacje w wielkości fontów między tekstem akapitowym a nagłówkami są niezwykle ważne. Tworzą one spójną strukturę witryny oraz jej hierarchię. Obie te rzeczy są niezwykle istotne, prowadzą czytelnika po stronie, dają mu znać co ważne lub ważniejsze, oraz informują gdzie jest początek i koniec. Jak więc dobrać wielkość napisów dla treści oraz nagłówków?

1. Teksty akapitowe

Zacznę od tego, czego jest najwięcej, czyli akapitów z treścią. Istnieje zasada mówiąca, a raczej sugerująca, że powinien on mieć rozmiar nie mniejszy niż 16 px. Wynika ona z tego, że przeglądanie witryn na smarftonach jest już standardem. W zawiązku z tym chcemy, żeby treść była czytelna na jak największej ilości urządzeń. Jest to też domyślny rozmiar tekstu w przeglądarkach.

Zgadzam się z tym, jak najbardziej, trzeba mieć jednak świadomość, że wartość ta nie jest sztywna i nie można brać jej za regułę. Powodem jest duża różnorodność w budowie krojów pisma. W wielu przypadkach trzeba zdać się na intuicję i dobre oko. Poniżej zobrazowałam wyjątki na przykładach. Fonty szeryfowe są wizualnie nieco mniejsze od krojów bezszeryfowych. Te pierwsze posiadają zakończenia liter w postaci kresek, zwanych właśnie szeryfami, i to one optycznie pomniejszają literę. Mogą też różnić się rozmiarem oczek (pustej przestrzeni wewnątrz litery), co powoduje, że fonty takiego samego rozmiaru wydają się być różnej wielkości.

Wnioski

• używajmy rozmiaru 16 px dla tekstów akapitowych (treści) na stronach i blogach
• przy krojach szeryfowych lub fontach o małych oczkach — warto zastanowić się nad nieco większym (o 2-4 piksele) rozmiarem fontu
• rozmiar fontu dla tekstu raczej nie powinien przekraczać 20 pikseli, większe rozmiary zarezerwujmy sobie dla nagłówków (o nich napisałam niżej)

Porównanie dwóch fontów o tej samej wielkości, bezszeryfowy Arial wydaje się być większy od szeryfowego kroju Georgia, jest to jednak tylko optyczne złudzenie.

Dwa różne kroje pisma z jednej odmiany (Medium) o tym samym rozmiarze. Różnica w wielkości oczek daje wrażenie, że Futura jest mniejsza od fontu Lato.

2. Nagłówki

Używanie nagłówków h1, h2… itd. jest przyjazne nie tylko dla SEO, ale również buduje wizualną harmonię treści witryny. Każda strona powinna zawierać nie więcej niż dedykowane sześć stylów nagłówków. Ich wielkości powinny być dobrane według skali typograficznej. Ta tradycyjna, w przypadku WWW wyrażona w pikselach, to: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. Używanie jej jest najbezpieczniejszym rozwiązaniem, ale można stworzyć też własną, która powstanie na potrzeby danego projektu. Powodem jest opisana wyżej, przy tekstach akapitowych, anatomia liter oraz oczywiście indywidualne podejście do projektowania. Jak zbudować taką skalę? Opiszę to na przykładzie klasycznej skali typograficznej.

Tradycyjna skala typograficzna znana jest nam między innymi z edytorów tekstu. Budując własną skalę typograficzną — wiele osób korzysta z ciągu Fibonacciego. Jest jeden ze sposobów na uzyskanie złotej proporcji

W witrynie mamy nagłówki od h1 do h6 oraz tekst akapitowy, oznaczany w CSS jako p. Jeśli dla treści [p] wybieramy rozmiar 16 px, o którym pisałam wyżej, to dla najmniejszego nagłówka h6 kolejny w ciągu jest rozmiar 18 px, później dla nagłówka h5 — rozmiar 21 px, itd., kończąc na h1, który będzie miał 60 px. Można oczywiście zacząć nadawanie nagłówkom rozmiaru od 21px. Jeszcze raz przypomnę, wszystko zależy od projektu, skala ma nam pomóc zachować w nim porządek, rytm i spójność.

Przykład dobrania wielkości nagłówków według tradycyjnej skali typograficznej.

Wnioski

• używajmy nagłówków dla tytułów postów, ale i w ich treściach, żeby zakomunikować hierarchię ważności w naszym tekście
• dobierając rozmiary nagłówków skorzystajmy ze skali, jeśli nie czujemy się jeszcze pewni w temacie typografii, to najlepszym i najbezpieczniejszym wyborem będzie tradycyjna skala typograficzna
• stosujmy nie więcej niż dedykowane sześć stylów nagłówków

3. Interlinia — odstępy między linijkami tekstu

Wartość równie ważna co rozmiar fontu (line-height w CSS). 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 wybrany font 16 px, interlinia będzie więc 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.

Porównanie różnych ustawień interlinii dla tekstu o rozmiarze 16 px.

Wnioski

• unikajmy automatycznej interlinii
• używajmy interlinii o połowę większej od wybranego przez nas rozmiaru dla kroju pisma

Gdzie szukać dobrych fontów?

Zawsze mówię, że są trzy drogi, ale ja przestawiam tylko  dwie, bo na tej trzeciej spotkamy… Comic Sans’a. Font, który już na zawsze będzie stał na podium, jako najbrzydszy na świecie. Jego zła “renoma” wynika z brzydoty, której ukryć się nie da. Sam font nie powstał po to, żebyśmy go dzisiaj używali. Dlaczego i czemu tak nienawidzimy tej pisanki i po co powstała, możecie posłuchać w tym krótkim filmiku:

1. Płatne czy darmowe?

Wróćmy do tematu fontów i dwóch dróg. Te dwie to: płatna i darmowa. Istnieje wiele stron oferujących możliwość zakupu fontów, np. myfonts.com. Chodzi tu głównie o klasyczne i znane kroje pisma, jak Helvetica czy Futura, które jeśli chcemy używać ich na stronie WWW, trzeba wykupić na nie licencję. Wśród płatnych fontów możemy wypatrzeć perełki, które nie powtórzą się w wielu miejscach. Właśnie z tego powodu, że twórcy chętniej korzystają z darmowych fontów. Jeśli o nich mowa, to Google Fonts lub Font Squirell oferują całą masę wspaniałych fontów, które można bezpłatnie zaimplementować na stronie.

2. Implementacja

Jeśli chodzi o implementację fontów, to na pewno najłatwiejsze będzie użycie tych, które oferuje Google Fonts. Osobiście rekomenduje to rozwiązanie, bo jest w czym wybierać. W bazie GF znajdziemy ponad 700 krojów. Ponadto łatwo możemy osadzić je sami, nawet jeśli jesteśmy laikami.

Jeśli skorzystamy z innej strony, która oferuje fonty do używania online, czy to darmowe, czy płatne, to wtedy implementacja odbywa się za pomocą reguły @font-face. Osadza ona kroje pisma, które posiadają do tego odpowiednią licencję. Jeśli średnio ogarniamy zaawansowane technologie, to do tej metody osadzania fontów przyda nam się już pomoc programisty.

3. O czym należy pamiętać wybierając fonty!

• Font, który wybieramy powinien mieć polskie znaki.
• Po implementacji sprawdźmy, czy na wszystkich przeglądarkach fonty na pewno dobrze nam się wyświetlają. Ja korzystam z Safari (wiele osób pomija sprawdzenie jak wygląda to w tej mało popularnej przeglądarce) i ciągle spotykam blogi (i małe, i duże), w których wszystko byłoby ok, ale brak polskich znaków, szczególnie w nagłówkach, po prostu razi.
• Sprawdź, czy font, który wybrałeś na stronie innej niż Googłe Fonts, posiada licencję do używania na stronach internetowych

Mam nadzieję, że wszystkie te informacje pomogą Wam w dobraniu na swoich blogach odpowiedniej typografii. Niedługo pojawią się na blogu kolejne artykuły, które będą częścią cyklu z lekcjami grafiki dla blogerów.

Artykuł Wszystko, co bloger powinien wiedzieć o fontach pochodzi z serwisu My Pink Plum!.

Postanowiliście, że sami wykonacie swoje zaproszenia ślubne i nie wiecie jakie są najlepsze czcionki do zaproszeń z polskimi znakami? Albo może poszukujesz fontu, który użyjesz na inną okoliczność — urodziny lub chrzciny? Sieć jest pełna różnych zestawień z pięknymi krojami pisma. Często jednak nie do końca te zestawienia są na tyle praktyczne, żeby być z nich w pełni zadowolonym, kiedy jest się laikiem. Dużo krojów nie posiada polskich znaków, a część z nich nie jest darmowa. Dlatego postanowiłam zrobić zbiór darmowych czcionek ozdobnych z polskimi znakami. Przydadzą się one zarówno osobom, które raz na jakiś czas tworzą coś “dla siebie”, oraz tym, którzy projektują częściej i lubią przeglądać tego typu zestawienia. Dodatkowo przygotowałam się kilka praktycznych porad dotyczących samego wybierania krojów pisma.

Słowo czcionka bardzo ciężko przechodzi mi przez gardło w odniesieniu do elektronicznego pliku, w którym zapisane są kroje pisma. Oczywiste jest, że mówiąc czcionka, nie mamy na myśli odlewu stopu drukarskiego (bo ten termin to oznacza). Większość osób potocznie nazywa tak fonty i nie ma w tym nic złego. Ja sama tego nie robię, i często o tym mówię, szczególnie kiedy posługuję się fachowym językiem, jak np. w moim artykule o typografii. Jednak ze względu na to, że wiele osób szuka ich pod hasłem czcionka, to używam tego sformułowania, żeby ułatwić poszukiwania. Szczególnie tym, którzy od czasu do czasu potrzebują jakichś informacji. I przy okazji wierzę, że ten, kto zajrzy tu w trakcie wybierania zestawu fontów do zaproszeń ślubnych, dowie się więcej w temacie typografii

Jak wybierać i stosować fonty ozdobne?

1. Takich, które nie są banalne! Pisałam kiedyś o krojach pisma, których należy unikać jak ognia. Jeśli szykujesz się do przygotowania zaproszenia ślubnego (lub z okazji innej okoliczności) samodzielnie, to zacznij od tej listy i zapamiętaj, których fontów nie używać.
2. Pamiętaj, że font musi mieć polskie znaki! Nie ma nic gorszego niż zaproszenie wypisane ładnym, odręcznym krojem, a gdzie polskie litery ą czy ę podmienione są na inny krój, który takie posiada. Zresztą zobaczcie sami:
   Mi się aż serce kraja, kiedy widzę takie zaproszenie, list lub, co jest dla mnie absolutnie niedopuszczalne – kartkę menu w restauracji. Dlatego w moim zestawieniu znajdziecie tylko odręczne czcionki z polskimi znakami.
3. Jeśli decydujesz się na poszukiwania darmowych, to zwróć uwagę na licencję. Dużo fontów jest dostępne dla użytku własnego, więc jeśli robisz coś dla siebie, to oczywiście nie ma problemu. Jeśli natomiast przygotowujesz coś komercyjnie, to autorzy w plikach z fontem (często zapakowane w paczka RAR i ZIP) udostępniają informacje jak i gdzie kupić licencję.
4. Nie wybieraj fontów nieczytelnych do całych akapitów. Może się okazać, że obdarowany zaproszeniem… po prostu go nie rozczyta. Dlatego niektóre fonty trzeba używać tylko w nagłówkach, mogą być nimi wypisane np. imiona Państwa Młodych czy inne, krótkie informacje, które chcemy wyróżnić.
   Spróbuj przeczytać wszystkie teksty i porównać czytelność. Zbyt gruby lub za bardzo ozdobny font ustawiony na tekst zaproszenia może okazać się trudny do czytania (po lewej). Jeśli wybierzesz grubszą pisankę, użyj jej w elementach (po prawej). Dla całych tekstów wybierz czcionkę, którą przeczytasz bez problemu.

Najlepsze czcionki do zaproszeń z polskimi znakami

Skoro wiesz już jak dobrać odpowiedni krój pisma, to czas na listę, którą przygotowałam
Znajduje się na niej 21 eleganckich, odręcznych i darmowych czcionek.

1. Allura 
   
2. Great Vibes
   
3. Miama
   
4. Parisienne
   
5. Clicker Script
   
6. Mochary
   
7. Raven Script
   
   
8. Coneria Script
   
9. Crunchy
   
10. Cheddar Jack
    
11. KG Eyes Wide Open
    
12. Sverige Script
    
13. Before the Rain
    
14. Maridian
    
15. Janda Stylish Script
    
16. Canela Bark
    
17. Respective
    
18. Castro Script
    
19. Qaskin
    
20. Quicker
    
21. US Declaration
    

Mam nadzieję, że moje porady oraz lista fontów
będą przydatne i przypadły Wam do gustu!

Enjoy!!

Artykuł Najlepsze czcionki do zaproszeń z polskimi znakami pochodzi z serwisu My Pink Plum!.

Wybór fontów imitujących pismo odręczne jest olbrzymi. Pisałam o tym całkiem niedawno. Poza listą bezpłatnych krojów pisma z polskimi znakami w tym stylu, przygotowałam tez kilka porad, jak ich używać. Często wraz z fontami ozdobnymi pojawia się pytanie — jak dodawać do nich ozdobniki, czyli elementy kaligraficzne. Takie “wywijaski” przy literach urozmaicają grafiki z typografią, ale trzeba umieć z nimi pracować i znać umiar. Dodatkowo też musicie wiedzieć, że fonty posiadające takie rozszerzenia, są w większości płatne (szczególnie jeśli chcemy mieć dużą ilość elementów). Nie ma jednej metody ich implementacji, ale przybliżę dwie, które są najwygodniejsze i najbardziej estetyczne.

Zacznę od najważniejszej informacji, która będzie kluczowa z tym poradniku: wiele fontów nie ma dodatkowych elementów kaligraficznych i jeśli chcecie je do wybranego kroju pisma dodać, to lepiej zmieńcie font na taki, który ma w swoim rozszerzeniu ozdobniki. Macie wtedy gwarancję, że będą one dopasowane stylem oraz grubością kreski i nie będą wyglądać sztucznie. W innym wypadku trzeba mieć naprawdę olbrzymie wyczucie i umiejętności w zakresie typografii, żeby uzyskać naturalny efekt w foncie, który nie jest rozbudowany o takie zdobienia. Ozdobniki są wykazane tablicach znaków, kiedy na  (dobrych!) stronach, z których je pobieracie. Spakowane są w paczce fontów, instalują się jako osobne pliki. Przykłady pokazałam niżej.

Ozdobniki kaligraficzne w fontach odręcznych

W gotowych plikach z fontami możemy spotkać dwa rodzaje plików z ozdobnikami:

1. Fonty z osobnymi elementami kaligraficznymi, które należy ręcznie dopasować do liter
2. Alfabety posiadające w swoich zasobach gotowe litery kaligraficzne

Użycie obu rozwiązań technicznie nie jest takie trudne, projektowo jest to już jednak wyzwanie! Ich wybór nie zależy od nas, a od twórców danego kroju pisma. Jeśli miał taki zamysł, że elementy kaligraficzne wkomponował w litery, to będzie nam się szybciej pracowało. Kiedy są one osobno, i musimy dodać je ręcznie, mamy za to większą elastyczność w używaniu dekoracji. Obie metody dopasowania mają swoje wady i zalety, opisałam je oczywiście niżej.

1.

Fonty z osobnymi elementami kaligraficznymi

Przykładowy font, który posiada osobne ozdobniki i litery, możecie zobaczyć poniżej. Jest to krój pisma Madina. W przypadku kroju takiego jak ten, należy dodać “wywijasa” już po przygotowaniu napisu. Można to zrobić za pomocną dowolnego programu graficznego, jak Photoshop czy Gimp.

Krój pisma Madina Script

UWAGI:

—> Po zainstalowaniu, na liście krojów pisma, elementy kaligraficzne pojawiają się jako osobny font:

—> Każdy z nich ma przypisaną literę:

Zaleta:

• możemy dopasować dowolny element do dowolnej litery, ponieważ nie ma sztywno przypisanych do litery ozdobników, dzięki temu osiągamy różnorodne, nieszablonowe efekty

Wada:

• pracochłonność, ponieważ elementy dekoracyjne trzeba ustawić ręcznie

2.

Fonty z gotowymi literami kaligraficznymi

Wygodniejsza metoda, bo nie musimy dopasowywać już ozdobników. Są one gotowe i używa się ich jako osobny font. Jeśli trafimy na dobry krój pisma, który ma sporo wersji, to mamy więcej możliwości projektowych. W przykładzie niżej pokazałam krój Bellwethaers. Ma on w swojej rodzinie ma wersje z krótkimi, długimi, bardzo długimi i zawijanymi literami!

Krój pisma Bellwethaers

—> Po zainstalowaniu, na liście krojów pisma, elementy kaligraficzne pojawiają się jako osobny font:

—> Każdy z nich ma obustronnie przypisaną literę, gdzie np. mała litera wywija w lewo, a duża w prawo

Zaleta:

• szybki efekt — dzięki temu, że mamy gotowe litery, nie tracimy czasu na dopasowanie do nich elementów kaligraficznych

Wada:

• brak elastyczności w dopasowaniu elementów kaligraficznych, nie można ustawić ich ręcznie w edycji fontu, a jedynie przy manipulacji “krzywymi”

Dodatkowo

Oczywiście możecie też skorzystać z paczek z ozdobnikami, które nie należą do żadnych fontów. Znajdziecie takie na stronach typu Creative Market. Jest to najtrudniejsza droga, bo tak jak wspomniałam wyżej, wymaga sporych umiejętności i wyczucia. Sama czasem korzystam z takich dopasowań, ale znacznie bardziej wolę fonty z gotowymi rozszerzeniami kaligraficznymi, bo łatwiej jest zachować naturalność liter.

Jakie darmowe kroje posiadają rozszerzenia kaligraficzne? Możecie sprawdzić np.  Sverige Script, Before the Rain lub Some Weatz, i na nich przećwiczyć dodawanie ozdobników. Samo ich używanie nie wystarczy, żeby robić śliczne grafiki. Trzeba trochę poćwiczyć, żeby osiągnąć zadowalające efekty, obejrzeć sporo inspiracji, a i umiejętność projektowania nie jest tu bez znaczenia. Warto pamiętać o zasadzie: mniej znaczy więcej!

Enjoy!!

Artykuł Ozdobniki kaligraficzne w fontach odręcznych pochodzi z serwisu My Pink Plum!.

Często powtarzam, że liter trzeba używać rozważnie. Zawsze też przypominam, że tworząc teksty i redagując je dbamy o stylistykę, ortografię, interpunkcję itd. Żeby ten profesjonalizm był dopięty na ostatni guzik, powinniśmy dopracować każdy szczegół, również w od strony wizualnej dotyczącej typografii. Post z absolutnie wszystkim, co bloger powinien wiedzieć o fontach, niesamowicie “poniósł się” po sieci. Cieszę się z tego jak wariatka!

Co zrobić, żeby napisy na grafikach i zdjęciach były jak najlepsze oraz jakich błędów nie popełniać? Zebrałam 7, które spotykam najczęściej. I mimo, że mam ochotę krzyczeć jak je widzę, to tutaj spokojnie wyjaśnię Wam czego nie powinniście robić literom, kiedy tworzycie napisy.

Zbyt przerysowany cień

Kole w oczy i sprawia, że aż zęby zgrzytają! Cień pod napisami intensywnością powinien być oczywiście dobrany do rodzaju tła, ale przerysowany na bieli, jest po prostu nie do zniesienia. Balansujmy ostrożnie nie tylko rozmiarem i odległością, ale również kryciem.

Brak polskich znaków

O mamuniu, jak ja tego nie znoszę! Czy już wszyscy sprawdzili u siebie na blogach i stronach poprawne działanie fontów z polskimi znakami? Powtarzam, jako użytkownik niezbyt popularnego Safari, że ciągle spotykam się ze stronami gdzie font jest nie do końca dobrze zaimplementowany. Sprawdźcie działanie swojej witryny w KAŻDEJ przeglądarce. Na grafikach, które tworzymy w programie graficznym można to kontrolować i dodać polskie znaki samemu, ale co do tego… Spójrz punkt niżej

Polskie znaki z przecinków

Boli, boli i jeszcze raz boli. Znaków diakrytycznych (czyli ogonków w ą, ę, ś, ć itd.) nie tworzymy dodając PRZECINKI. Tworzy się je z części liter, zgrabnie je wycinając, żeby pasowały do stylu danego fontu. Tym, którzy jeszcze nie działają na tyle płynnie w np. Photoshopie, a chcą nauczyć się tworzyć naprawdę dobrą typografię, polecam zacząć od fontów, które jednak polskie znaki posiadają. Albo pisać w języku angielskim Mam też małą podpowiedź do ogonków dla Ś czy Ć. Często w zestawie fontów, które nie mają polskich liter znajdziemy Ó, możemy wtedy “pożyczyć” od niej ogonek i dodać do S lub C. Z ogonkami dolnymi ą czy ę jest trochę trudniej. Może za jakiś czas uda mi się przygotować o tym tutorial.

Sztuczne pochylenie

Też już o tym pisałam, we wspomnianym wyżej artykule o fontach. Żeby używać pochylonego napisu, profesjonalnie mówi się na niego “w wersji italic”, trzeba najpierw sprawdzić czy dany font w ogóle posiada taką odmianę. Zwróć uwagę na napisy pochyl się powyżej. Ten po lewej stronie wygląda płynnie, litery zostały specjalnie zaprojektowane, żeby pochylenie wyglądało ładnie i naturalnie. Natomiast po prawej mamy pochylenie wymuszone, gdzie napis wygląda tak samo jak w wersji zwykłej, ale jakby był “kopnięty”. Żeby nie robić takiego sztucznego pochylenia należy wybierać odmianę fontu, pokazane jest to poniżej. Ikonkę zaznaczoną na czerwono starajcie się unikać.

Sztuczne pogrubienie

To samo co pochylenia dotyczy pogrubienia. Automatyczne jego dodanie, z ikonki zaznaczonej niżej na czerwono, to tylko obrys do wersji regularnej, który deformuje literę. Prawidłowa wersja bold, czyli pogrubiona, to specjalnie zaprojektowana odmiana, która może też występować w kilku wariantach np. extra bold.

Zbyt dużo fontów

Dobieranie kilku rodzajów fontów na jednej grafice to już wyższa szkoła jazdy. Naprawdę! Żeby żonglować różnymi rodzajami krojów pisma i mieszać je ze sobą, trzeba mieć spore umiejętności i doświadczenie. Dlatego oczy mi krwawią(!), jak czasem gdzieś spotykam plakaty lub kartki do pobrania, w których pojawiają się takie mieszanki wybuchowe Jak zaradzić nieumiejętnemu dobieraniu fontów? Przede wszystkim jest taka złota zasada, żeby dobierać ze sobą nie więcej niż dwa kroje pisma. Wtedy to zadziała, uwierzcie mi Tutaj znajdziecie niesamowitą pomoc z tym temacie.

DEFORMACJA

Ha! Wyobraźcie sobie, że fonty tworzone są z niesamowitą starannością, niektórzy poświęcają im całe życie! Na przykład taka Helvetica (swoją drogą, polecam film o tej samej nazwie), ma całą masę odmian. Wąskie, szerokie, grube, chude. Jest w czym wybierać. Dlatego nie ma żadnej potrzeby, żeby dokonywać na fontach deformacji. W Photoshopie jest takie miejsce jak zmiana % wysokości i szerokości, której, w mojej opinii, powinniśmy unikać jak tylko się da. Przydaje się naprawdę w niewielu przypadkach. Zaznaczyłam ją aż 3 X, żeby podkreślić istotę zmieniania rozmiarów fontów za pomocą zaznaczonej na zielono opcji. Najlepiej też unikać CTRL+T, bo przypadkiem palec zsunie się z SHIFTa (zachowującego proporcje) i bach… deformacja gotowa!

Szanujcie litery, zasłużyły na to <3
Mam nadzieję, że moje porady Wam się przydadzą!

Enjoy!!

Artykuł Błędy w tworzeniu napisów na zdjęcia lub grafiki pochodzi z serwisu My Pink Plum!.

Wiecie, że nie cierpię zaczynać czegoś “od pierwszego”? Czy to roku, czy miesiąca, nawet od poniedziałku. Jak można coś zaczynać od pierwszego!? To czysty przypadek, że dziś, 1 września, przychodzę do Was z czymś ZUPEŁNIE nowym. Na przekór moim przekonaniom! Po prostu nie mogę uwierzyć, ale stało się i… Od teraz będę do Was więcej mówić! Pisać oczywiście również, bo blog to największy kawałek mojego serca. Nadszedł jednak czas, w którym zdecydowałam, że stanę przed kamerą i nagram video. Kochani, mój kanał na YT możemy uznać oficjalnie za otwarty! Dużo łatwiej będzie mi jednocześnie pokazywać i opisywać Photoshopowe triki, a co najważniejsze, będą one łatwiejsze w odbiorze.

Ogromnie się stresuję premierowym odcinkiem! Pamiętajcie, że każda łapka w górę pod filmem, uprzejmy komentarz i subskrypcja kanału są mile widziane oraz szalenie motywujące. Do kamery przyzwyczajam się od jakiegoś czasu. W sensie tej w komórce. Efekty możecie zobaczyć codziennie na moim Instagram stories. Z tą różnicą, że wideo są i będą coraz bardziej profesjonalne na jutubowym kanale.

A o czym jest pierwszy film? W tutorialu wyjaśniam krok po kroku jak zrobić napis ze złotych liter w Photoshopie. Jest to naprawdę proste, a metodę zdarzało mi się już pokazywać m.in. w poście jak zrobić zdjęcie w kształcie liter. Mam też ekstra niespodziankę — udostępniam tekstury złotych folii, które są niezbędne do zrobienia napisów. Pobrać je oraz obejrzeć tutorial możecie niżej. Zapraszam

Linki do pobrania

WZÓR 1 ZŁOTKA    WZÓR 2 ZŁOTKA

WZÓR 3 ZŁOTKA    WZÓR 4 ZŁOTKA

Projekty są jest gotowe do pobrania wyżej. Wystarczy wybrać wzór i zapisać plik.

• Nie zmieniam wzorów na życzenie — nie piszcie do mnie w tej sprawie wiadomości, udostępnione grafiki są jedynymi ich wersjami
• Grafiki przygotowane są do druku w wysokiej jakości
• Pliki zapisane są w formacie JPG
• Można z nich korzystać tylko dla własnego użytku (również na blogach i ich fanpage’ach), nie sprzedawajcie ich w żadnej postaci!

Jeśli grafiki i filmik Wam się podobają, to będzie mi bardzo miło jeśli je udostępnicie,
aby Wasi bliscy oraz znajomi też mogli się nimi cieszyć!

Enjoy!!

Artykuł Jak zrobić złoty napis w Photoshop’ie pochodzi z serwisu My Pink Plum!.

Używanie ścieżek w Photoshopie na niezwykle szerokie zastosowanie i łączy się z całą masą funkcji. Między innymi z tekstem. Jakiś czas temu pokazywałam na YT jak zrobić teksty “wygibasy”, czyli uzyskiwanie wygiętego napisu. W dzisiejszym filmiku wyjaśniam jak zrobić napis po okręgu w programie Adobe Photoshop. Zarówno po jego wewnętrznej, jak i zewnętrznej krawędzi. Pokazuję również jak działa narzędzie Tekst, kiedy chcemy wpisać sobie akapit do środka kształtu. To bardzo prosta metoda, a na pewno ułatwi Wam wiele działań. Dokładnie tak samo tworzy się tekst po kwadratach, prostokątach, trójkątach i wszelakich kształtach.

Jak zrobić napis po okręgu?

Ważne informacje:

• pracuję w programie Adobe Photoshop 2017
• jest to program płatny, możecie go kupić na adobe.com — są tu wszystkie ceny i napisanie do mnie nie spowoduje, że program będzie tańszy
• studenci, uczniowie i nauczyciele mogą skorzystać ze zniżek, szczegóły są na stronie firmy Adobe

Enjoy!!

Artykuł Tekst po okręgu w Photoshopie pochodzi z serwisu My Pink Plum!.

Rysowanie piórkiem w Photoshopie to jedna z najbardziej podstawowych funkcji. Zresztą, nie tylko w nim. Jest to również jedno najważniejszych narzędzi, które znajdziecie w programach do grafiki wektorowej, jak np. Adobe Illustrator czy Corel Draw. Służy ono do rysowania własnych kształtów. Naukę jego obsługi zawsze polecam zacząć od prób odrysowywania obiektów ze zdjęcia. Świetnie sprawdzą się tu zwierzęta lub owady (np. motyl). Pamiętajcie — praktyka czyni mistrza!

Jak zrobić logo?

W tym tutorialu wyjaśniam jak odrysować ze zdjęcia sylwetkę kota. Jest to jednocześnie odpowiedź na jedno z najczęściej zadawanych mi pytań — jak zrobić logo, które będzie zbudowane z własnego symbolu. Uzupełniam go o tekst napisany po okręgu, do którego instrukcję przygotowałam już jakiś czas temu.

Ważne informacje:

• pracuję w programie Adobe Photoshop 2017
• jest to program płatny, możecie go kupić na adobe.com — są tu wszystkie ceny i napisanie do mnie nie spowoduje, że program będzie tańszy
• studenci, uczniowie i nauczyciele mogą skorzystać ze zniżek, szczegóły są na stronie firmy Adobe

Zaczynamy!

Dajcie znać w komentarzach czy film Wam pomógł!

Enjoy!!

Artykuł Jak zrobić logo? pochodzi z serwisu My Pink Plum!.

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.

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ż wersaliki¹) 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.²

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.³ 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.⁴ 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.⁵

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

____

¹ The Smashing Book #1 Edycja polska, Helion 2013, s. 63
² Ibidem, s. 98
³ Ibid., s. 100
⁴ Ib., s. 60
⁵ Ib., s. 61

Artykuł 6 najczęstszych błędów w formatowaniu treści pochodzi z serwisu My Pink Plum!.