projekt

Jak wybrać odpowiednią czcionkę
dla strony internetowej lub artykułu?

Te wskazówki pomogą ci wybrać czcionkę -
bez zagłębiania się w teorię.
Czcionka jest bardzo ważna. Jest jak powietrze, nie zauważasz jej, gdy wszystko jest w porządku. Większość ludzi nie ma pojęcia o krojach pisma, ich nazwach lub cechach (i to jest w porządku), ale z pewnością wyczują, że coś jest nie tak, jeśli używasz nieodpowiedniej czcionki na swojej stronie internetowej.
Dzięki Tilda, platformie typu "wszystko w jednym", każdy może stworzyć stronę internetową bez zatrudniania programisty lub profesjonalnego projektanta.
Zmiana i dostosowywanie czcionek
Czcionki można zmieniać w ustawieniach witryny i stosować we wszystkich blokach i stronach. Tworzy to jednolity i przejrzysty styl witryny.
Można dodać maksymalnie dwie czcionki. Z jednej strony, użycie ograniczonej liczby czcionek tworzy dobre wrażenie wizualne. Z drugiej strony, każda dodatkowa czcionka spowalnia prędkość pobierania strony.

Przejdź do "Ustawień strony", a następnie kliknij "Czcionki i kolory", co spowoduje przejście do par rodzin czcionek. Są to kombinacje dwóch czcionek zalecane przez naszych projektantów. Przewiń w dół, aż znajdziesz parę, która Ci się podoba. Kliknij "Wybierz" i "Zapisz zmiany". Czcionki na Twojej stronie zmienią się.
Jeśli podane przez nas kombinacje nie są odpowiednie, kliknij "Ustawienia niestandardowe". Zobaczysz listę innych opcji dodawania czcionek do Tilda, takich jak:
1)Wybierz czcionkę z domyślnego zestawu
2) Prześlij własną czcionkę
3) Zainstaluj czcionkę za pomocą Typekit
4) Użyj czcionek Google
5)Prześlij plik CSS
Aby uzyskać szczegółowe instrukcje, skorzystaj z powyższych linków.
Jeśli przewiniesz stronę w dół, znajdziesz ustawienia rozmiaru, grubości i koloru czcionki. Ustawione tam parametry zostaną zastosowane w całej witrynie. Jeśli chcesz zmienić czcionkę w bloku, możesz to zrobić w edytorze dla każdego bloku.
Czym są grubości czcionek?
Font-weight definiuje grubość każdej czcionki. Zazwyczaj czcionki mają dwa style - zwykły lub pogrubiony. Mogą one mieć dodatkowe stopnie grubości, od super lekkiej do super pogrubionej. Tilda obsługuje pięć podstawowych grubości, takich jak light, regular, medium, semi-bold i bold. Nie każda czcionka ma wiele grubości, niektóre mają tylko dwie: zwykłą i pogrubioną.
Istnieje siedem wariantów grubości czcionki dla Avenir.
Jaki jest najlepszy rozmiar czcionki dla strony internetowej?
Rozmiar czcionki zależy od ilości tekstu w witrynie. Jeśli nie masz dużo tekstu i używasz go głównie do podpisów i komentarzy, zwiększ rozmiar czcionki do 22 pikseli (domyślny rozmiar czcionki to 20 pikseli). Jeśli masz dużo tekstu, zmniejsz czcionki (18px), aby poprawić czytelność.
Jak ustawić właściwości czcionki w zależności od projektu
Zadaj sobie pytanie: jaki jest Twój projekt internetowy? Czy jest to artykuł, wpis na blogu lub długa lektura, w której króluje tekst? A może masz stronę internetową, landing page lub fotorelację z niewielką ilością tekstu?
Ustawianie czcionek dla strony internetowej zgodnie z jej przesłaniem
Kiedy dopiero zaczynasz projektować stronę internetową, zdecyduj, czy domyślna czcionka pasuje do wyglądu i stylu Twojej witryny. Nie stworzyłbyś stron internetowych dla obozu sportowego dla dzieci i architektury wyglądających tak samo, prawda? Różnicę można wyrazić za pomocą grubości czcionek.
Następnie przyjrzymy się czterem różnym grubościom czcionek w tytułach i tekście. Pomagają one ustawić ton głosu witryny, dzięki czemu jej strony wyglądają na zrównoważone i właściwe.
1
Tytuł pogrubiony + tekst normalny
Jest to najbardziej podstawowa kombinacja, która działa dobrze dla większości stron internetowych. Użyj go, jeśli chcesz po prostu stworzyć dobrze wyglądającą stronę internetową bez zwracania uwagi na konkretne elementy. Pasuje do każdej strony internetowej.

Użyj następujących parametrów w ustawieniach strony:
Waga czcionki tekstowej - Normalna
Waga czcionki nagłówka - Półgruba
Ustawienia witryny > Czcionka i kolory > Rozmiar i waga
Przykład
Strona internetowa z ogłoszeniami o pracę. Czcionki: Open Sans (tytuł) i Roboto (tekst)
2
Pogrubiony tytuł + normalny tekst
Zalecamy korzystanie z tej popularnej kombinacji, jeśli Twój projekt dotyczy napędu i energii.

Szczególnie nadaje się do stron internetowych barów, przestrzeni coworkingowych, promocji koncertów i tras koncertowych, zawodów sportowych itp.

Użyj następujących parametrów w ustawieniach strony:
Waga czcionki tekstowej - Normalna
Waga czcionki nagłówka - Pogrubiona
Ustawienia witryny> Czcionka i kolory > Rozmiar i waga
Przykład
Strona internetowa dlaprzestrzeni coworkingowej. Czcionki: Ubuntu (tytuł) i PT Sans (tekst)
3
Pogrubiony tytuł + cienki tekst
Jest to rzadziej spotykana kombinacja; wygląda dramatycznie ze względu na kontrast czcionek. Działa świetnie, gdy trzeba dopasować styl do stylu. Na przykład, wyróżniające się i łatwe do odczytania tytuły i teksty odzwierciedlają estetyczny wygląd tej strony internetowej kursu marketingowego.

Użyj następujących parametrów w ustawieniach strony:
Waga czcionki tekstu - Light
Waga czcionki nagłówka - Bold
Ustawienia witryny> Czcionka i kolory > Rozmiar i waga
Przykład
Strona internetowa studia projektowego. Czcionki: Noto Sans (tytuł) i Open Sans (tekst)
4
Cienki tytuł + cienki tekst
Ta kombinacja bardzo dobrze sprawdza się w projektach związanych z zaawansowaną technologią, postępem, najnowocześniejszą technologią lub czymś, co ma wyglądać pięknie i mocno. Jest szczególnie dobra, gdy masz dużo białej przestrzeni, zaakcentowanej plamami jasnego koloru i pięknymi obrazami.

Nadaje się na strony internetowe z gadżetami, biżuterią, ekskluzywnymi kawiarniami lub restauracjami i salonami piękności.

Użyj następujących parametrów w ustawieniach strony internetowej:
Waga czcionki tekstowej - Light
Waga czcionki nagłówka - Light
Ustawienia witryny> Czcionka i kolory > Rozmiar i waga
Przykład
Strona docelowa dla aplikacji mobilnej do obróbki zdjęć. Czcionki: Open Sans (tytuł) i Open Sans (tekst)
Przykłady pięknych kombinacji czcionek
Łączenie różnych czcionek w tytułach i tekście pomoże osiągnąć różne stopnie ogólnego efektu wizualnego oraz wyrazić charakter i ton głosu witryny.
Wybór czcionek dla artykułu
Czy chcesz, aby Twój artykuł był łatwy do odczytania dla użytkowników? Upewnij się, że zastosowano w nim dobre kontrasty, a czcionki nie są zbyt duże.

Jeśli masz długą lekturę lub artykuł z dużą ilością tekstu, wybierz rozmiar czcionki 18px. W przypadku fotoreportażu, który wykorzystuje tekst głównie do podpisów, zwiększ rozmiar czcionki do 20px lub nawet 22px.

Użyj następujących parametrów w ustawieniach strony:
Waga czcionki tekstowej - Normalna
Waga czcionki nagłówka - Pogrubiona / Półpogrubiona
Rozmiar czcionki tekstowej - 18px
Ustawienia witryny > Czcionka i kolory > Rozmiar i waga
Przykład
Blog o modzie
Przykład
Blog korporacyjny
Przykład
Artykuł na temat marketingu online
Z szeryfami czy bez?
Czcionka szeryfowa
Czcionka bezszeryfowa
Małe pomarańczowe linie w przykładzie po lewej stronie to szeryfy. W cytacie Massimo Vignelli po lewej stronie użyto czcionki Baskerville Regular, a po prawej Helvetica Light.
Szeryfy tworzą linię prowadzącą, która pomaga oczom przesuwać się płynniej i szybciej. Gdy pojawiły się pierwsze komputery, czcionki bezszeryfowe stały się powszechne, ponieważ wyglądały bardziej czytelnie na ekranie o niskiej rozdzielczości.

Nowoczesne monitory wyświetlają obie czcionki równie dobrze. Dlatego dziś wybór między czcionką szeryfową a bezszeryfową zależy od charakteru wiadomości, a nie od czytelności. Czcionki szeryfowe czasami sugerują raczej formalny ton i pasują do niektórych, ale nie wszystkich marek.
Dodawanie dodatkowych czcionek
We wszystkich poprzednich przykładach używaliśmy bardzo podstawowych zestawów czcionek. Jeśli chcesz zmienić zestaw czcionek, przejdź do ustawień witryny i wybierz czcionkę z listy lub dodaj dowolną inną czcionkę, którą lubisz (ponieważ w Tilda możesz!).
Gdzie kupić czcionki lub znaleźć je za darmo?
W aplikacji Tilda istnieje pięć sposobów na dodanie czcionki:
1
W ustawieniach witryny wybierz jedną z 13 czcionek, które wstępnie wybraliśmy z otwartych źródeł.
2
Prześlij plik z czcionką zakupioną w innym miejscu. Na przykład czcionki można kupić tutaj:

MyFonts.com
Ceny zaczynają się od około 19/29/49 USD za krój pisma. Niektóre z najtańszych czcionek kosztują 2 USD, podczas gdy inne mogą kosztować 89 USD. Niektóre zestawy zawierają darmowe czcionki. Dostępna jest również 30-dniowa wersja próbna czcionek internetowych.

Fonts.com
Działa w systemie subskrypcji. Można uzyskać bezpłatny dostęp do 3000 czcionek, podczas gdy płatne plany kosztują od 5 do 100 USD miesięcznie.

Type.today

3
Dodaj czcionkę przez Adobe Typekit. Jest to biblioteka czcionek.
- Plan bezpłatny: 940 czcionek
- Płatny plan kosztuje 49 USD miesięcznie i daje dostęp do 5660 czcionek.
- Dostęp do tych 5660 czcionek jest przyznawany subskrybentom Adobe Creative Cloud. Jeśli płacisz za Creative Cloud, nie musisz dodatkowo płacić za Typekit.
4
Używaj czcionek Google. Czcionki są darmowe. Nasz przewodnik.
5
Prześlij swój plik CSS. Nasz poradnik.
Lista dobrych czcionek
Futura. Kup tę czcionkę: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Kup tę czcionkę: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Kup tę czcionkę: myfonts.com/fonts/itc/franklin-gothic
Graphik. Kup tę czcionkę: type.today/Graphik
Museo. Kup tę czcionkę: myfonts.com/fonts/exljbris/museo-sans
Gotham. Kup tę czcionkę: typography.com/fonts/gotham
GT Walsheim. Kup tę czcionkę: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Kup tę czcionkę: myfonts.com/fonts/linotype/helvetica-neue
Jak zapewnić czytelność witryny
Niezależnie od wybranej czcionki, musi być ona czytelna. Zwłaszcza jeśli używasz zdjęcia w tle. Jeśli umieścisz cienką czcionkę na obrazie zawierającym wiele drobnych szczegółów, tekst będzie bardzo trudny do odczytania. Zawsze miej to na uwadze!
Co można zrobić? Po pierwsze, użyj dobrego zdjęcia w tle z dużymi, jednorodnymi elementami. Po drugie, zastosuj filtr wygaszania, aby zmiękczyć obraz. Ułatwi to czytanie tekstu. Po trzecie, możesz zwiększyć wagę bloku projektu za pomocą stylu wbudowanego. Oznacza to, że przypisujesz ustawienia do określonej sekcji tekstu, a nie do całej witryny. Podświetl żądany tekst i przypisz ustawienia za pomocą edytora witryny.
Styl zastosowany w ten sposób zawsze będzie miał pierwszeństwo przed ustawieniami domyślnymi. Tak więc, gdy zmienisz ustawienia czcionki w witrynie, a zmiany te nie będą widoczne na stronie, oznacza to, że są one "wbudowane". Aby usunąć te zmiany, po prostu zaznacz tekst i kliknij "Wyczyść".
Tekst nie jest do końca czytelny
Tekst jest łatwy do odczytania
Na lewej okładce tekst jest bardzo trudny do odczytania. Aby to poprawić, wybraliśmy zdjęcie bez wielu drobnych szczegółów, użyliśmy 40% niebieskiego filtra i zwiększyliśmy grubość czcionki.


Jeśli chcesz dowiedzieć się więcej o typografii, znajdź strony internetowe podobne do tej, którą projektujesz i dowiedz się, jakie czcionki są w nich używane. Pomoże ci w tym rozszerzenie przeglądarki What Font.

Przejrzyj także to niezależne archiwum typograficzne. Zawiera ono kolekcję stron internetowych i próbek materiałów drukowanych posortowanych według rodzaju czcionki.

Podobał Ci się artykuł? Podziel się nim ze znajomymi! Wielkie dzięki!
Wykonane na
Tilda