Łączenie czcionek internetowych za pomocą @font-face. Kwestia prawna używania czcionek

Pogrubiony tekst

Pogrubiony tekst

Więcej niż zwykle

Mniej niż zwykle

Kursywa

Kursywa

Z podkreśleniem

Przekreślone

Możliwości atrybutów stylu

Oprócz opisanych tagów istnieje jeszcze kilka sposobów zmiany czcionki w HTML. Jednym z nich jest użycie atrybutu stylu ogólnego. Korzystając z wartości jego właściwości, możesz ustawić styl wyświetlania czcionek:

1) Font-family – właściwość ustawia rodzinę czcionek. Możliwe jest wyświetlenie wielu wartości.
Zmiana czcionki w html na następną wartość nastąpi jeżeli w systemie operacyjnym użytkownika nie jest zainstalowana poprzednia rodzina.

Składnia pisania:

rodzina czcionek: nazwa-czcionki [, nazwa-czcionki[, ...]]

2) rozmiar czcionki – rozmiar ustawia się od 1 do 7. Jest to jeden z głównych sposobów zwiększania czcionki w HTML.
Składnia pisania:

rozmiar czcionki: rozmiar bezwzględny | rozmiar względny | znaczenie | zainteresowanie | dziedziczyć

Możesz także ustawić rozmiar czcionki:

• w pikselach;
• W wartościach bezwzględnych ( xx-mały, x-mały, mały, średni, duży);
• W procentach;
• W punktach (pkt).

Rozmiar czcionki: 7

Rozmiar czcionki: 24 piksele

Rozmiar czcionki: x-duży

Rozmiar czcionki: 200%

Rozmiar czcionki: 24 pkt

styl czcionki: normalny | kursywa | ukośny | dziedziczyć

Wartości:

• normal – normalna pisownia;
• kursywa – kursywa;
• oblique – czcionka pochylona w prawo;
• inherit – dziedziczy pisownię elementu nadrzędnego.

Przykład zmiany czcionki w HTML przy użyciu tej właściwości:

styl czcionki:inherit

styl czcionki: kursywa

styl czcionki: normalny

styl czcionki: ukośny

wariant czcionki: normal | małe spółki | dziedziczyć

Przykład zmiany czcionki w HTML za pomocą tej właściwości:

wariant czcionki:inherit

wariant czcionki:normalny

wariant czcionki: małe kapitaliki

grubość czcionki: pogrubiona|odważniejsza|jaśniejsza|normalna|100|200|300|400|500|600|700|800|900

Wartości:

• pogrubienie – ustawia czcionkę HTML na pogrubioną;
• odważniejszy – odważniejszy w stosunku do normalnego;
• jaśniejszy – mniej nasycony w stosunku do normalnego;
• normal – normalna pisownia;
• 100-900 – ustawia grubość czcionki w odpowiedniku liczbowym.

grubość czcionki: pogrubiona

waga czcionki: pogrubiona

waga czcionki: jaśniejsza

waga czcionki: normalna

waga czcionki: 900

waga czcionki: 100

właściwość czcionki HTML i kolor czcionki

Czcionka to kolejna właściwość kontenera. Wewnątrz siebie łączył wartości kilku właściwości przeznaczonych do zmiany czcionek. składnia czcionki:

czcionka: rozmiar czcionki rodzina czcionek | dziedziczyć

Wartość można również ustawić na czcionki używane przez system w etykietach różnych elementów sterujących:

• podpis – dla przycisków;
• ikona – dla ikon;
• menu - menu;
• Message-box – dla okien dialogowych;
• small-caption – dla małych kontrolek;
• status-bar – czcionka paska stanu.

W tym samouczku artykułu opowiem Ci, jak stworzyć własną czcionkę na stronę internetową, korzystając z ikon, które sam stworzyłeś. Jedyne, czego potrzebujemy do tego to program do tworzenia grafiki wektorowej (Adobe Illustrator lub Inkspcape) i dostęp do Internetu. Zatem zaczynamy! Wszystkie użyte w tym celu obrazy, ikony i czcionki CSS można pobrać na końcu artykułu.

W tym samouczku zrobimy coś prostego. Dla pierwszej ikony narysujemy zwykłą gwiazdę. Dla drugiej ikony - orzeł z literą W w środku. Rysowanie jest dość łatwe i można tworzyć dowolne kształty i kombinacje. Do tych celów użyłem programu Illustrator.

Po zakończeniu części twórczej Twoje dzieło musi zostać zapisane w formacie SVG. Kliknij „Zapisz jako” i wybierz typ pliku jako SVG. Teraz możesz przejść bezpośrednio do tworzenia czcionki.

W tym celu korzystamy z popularnej i bezpłatnej usługi IcoMoon.

Pierwszą rzeczą do zrobienia jest utworzenie nowego projektu, kliknij menu w lewym górnym rogu i kliknij „Nowy projekt”. Następnie ładujemy nasze gotowe pliki svg po kliknięciu przycisku „Importuj ikony”. Po wykonaniu tych kroków na monitorze powinieneś zobaczyć taki obraz:

Teraz mamy możliwość zmiany kodu każdej ikony (w naszym przypadku będzie to e600 i e601), nazwy naszej czcionki, prefiksu CSS i tak dalej. Wszystko to odbywa się w „Preferencjach”. Czcionkę możemy także zobaczyć w akcji klikając na link „Włącz szybkie użycie” – co pozwoli nam uzyskać tymczasowy link do naszej czcionki, a także opcję podglądu kodu w CodePen.

Po skonfigurowaniu wszystkiego kliknij przycisk „Pobierz” u dołu strony i pobierz archiwum. W tym archiwum znajdziesz swoją czcionkę w formatach ttf, eot, svg i woff + stronę demonstracyjną z czcionką.

Korzystanie z ikon na stronie

Teraz wystarczy, że dołączymy czcionkę CSS za pomocą @font-face i określimy inne parametry (wszystkie są zapisane w pliku css w pobranym archiwum.

@font-face ( rodzina czcionek: "wdm-eagle"; src: url("//nazwa twojej witryny.com/fonts/wdm-eagle.eot"); , ( rodzina czcionek: "wdm-eagle"; mów: brak; styl czcionki: normalny; wariant czcionki: normalny; wysokość linii: 1; /* Lepsze renderowanie czcionek ========= -webkit-font-smoothing: antyaliased; -wygładzanie: skala szarości; ) .wdm-star:before ( treść: "\e600"; ) .wdm-eagle:before ( treść: "\e601"; )

Teraz możemy użyć naszej czcionki w kodzie HTML w następujący sposób:

Określanie nazwy klasy dla znacznika otrzymujemy naszą ikonę.

Przedstawiamy Państwu wybór bezpłatnych usług dla projektantów. To pierwsza opcja, w przyszłości planujemy ją rozbudować o nowe sekcje i narzędzia.

Czcionki

• Czcionki Google to ulubiona biblioteka czcionek wszystkich użytkowników. Umożliwia wybieranie i pobieranie różnych czcionek na każdą okazję.
• 1001 darmowych czcionek - biblioteka czcionek. Ma łatwą nawigację - czcionki są sortowane zarówno alfabetycznie, jak i według typu. Istnieje sekcja rosyjskich czcionek.
• Fontstruct to internetowy projektant czcionek. Bardzo proste narzędzie, które pozwoli Ci stworzyć własną czcionkę. Można rysować nie tylko standardowymi kwadratami, ale także innymi kształtami - kropkami, zaokrąglonymi rogami itp. Dla początkującego jest to idealne narzędzie, aby spróbować zobaczyć typografię w akcji.
• Font Squirrel to jedna z największych bibliotek czcionek. Dodatkowo możesz załadować zdjęcie i uzyskać nazwy użytych w nim czcionek. Jest sklep z czcionkami, a nawet sklep odzieżowy z logo.
• Type Light to w pełni funkcjonalny edytor czcionek. Umożliwia tworzenie, edycję i konwersję czcionek OpenType, TrueType i PostScript. Należy pobrać i zainstalować. Wersja bezpłatna ma ograniczoną funkcjonalność w porównaniu z wersją bezpłatną. Ale wystarczy stworzyć prostą czcionkę.
• What Font is to usługa internetowa służąca do wybierania czcionek internetowych. Pobieramy plik czcionki, wskazujemy adres URL witryny i sprawdzamy, jak pobrana czcionka będzie wyglądać na stronie. Wygodna obsługa.
• 1001 Czcionek – biblioteka czcionek (ponad 15 000). Łatwa nawigacja – czcionkę można wybrać według rozmiaru, typu, motywu, projektu itp. Menu pozwala dostosować wydruk, co pozwala zobaczyć każdą czcionkę w różnych opcjach: rozmiar, styl itp.
• Font Flame to usługa internetowa umożliwiająca wybór pary kompatybilnych czcionek. Działa to bardzo prosto – na stronie głównej znajduje się arkusz z dwoma napisami wykonanymi różnymi czcionkami. Jeśli Ci się podobało, kliknij „Kocham”; jeśli nie, kliknij „Nienawidź”. Następnie możesz ponownie wyświetlić wybrane. Kliknięcie nazwy czcionki powoduje otwarcie Czcionek Google.
• Typecast – wybór czcionki dla prototypu. Możesz zobaczyć, jak czcionka będzie wyglądać na dowolnym urządzeniu. Konieczne jest zidentyfikowanie różnych typów tekstu - nagłówków, cudzysłowów itp. Możesz wybrać krój pisma, rozmiar, styl i ustawić wcięcia. Zobaczysz swoją przyszłą stronę w zainstalowanych czcionkach. Dużym plusem jest wybór układu (jedna kolumna lub kilka, różne układy blokowe).
• Wordmark - umożliwia wybór czcionki zainstalowanej na komputerze użytkownika dla tekstu, logo lub tytułu. Kiedy wprowadzasz tekst w polu, jest on wyświetlany różnymi czcionkami. Możesz wybrać rozmiar, zarejestrować, wyświetlić w trybie czarno-białym i odwrotnie. Opcje, które Ci się podobają, publikowane są na Twitterze lub Facebooku – według wyboru użytkownika. Można wysłać e-mailem.

Zbiory Fotografii

• Unsplash to stale aktualizowany zbiór zdjęć. Kolekcje podzielone są tematycznie. Możesz znaleźć wszystko, od „Afroamerykanów” po „Naturę”. Każde zdjęcie ma swoją ocenę, możesz zobaczyć najlepsze lub nowe.
• FoodiesFeed – zdjęcia jedzenia. Obrazy podzielone są na kategorie. Możesz wybrać najlepsze, ekskluzywne, ikony, makiety itp.
• Darmowe zdjęcia referencyjne — ogromna lista obrazów z „prawdziwego życia”. Głównie fotografia krajobrazowa i przyrodnicza. Niewygodna nawigacja, podczas przewijania pojawiają się wszystkie zdjęcia na stronie głównej.
• Little Visuals – wysokiej jakości zdjęcia krajobrazów i budynków. Możesz pobrać archiwum najlepszych zdjęć opublikowanych w ciągu tygodnia. Zdjęcia są oznaczone hashtagami, ale nie są kategoryzowane.
• Gratisografia to ogromna biblioteka bezpłatnych zdjęć. Wszystkie zdjęcia podzielone są na sześć tematów: ludzie, grymasy, miasta, przedmioty, przyroda i zwierzęta. Możesz wyszukiwać według słów.
• Śmierć Stock Photo – zdjęcia stockowe. Nie możesz po prostu patrzeć i wybierać. Dokonują wyboru z miesięcznym wyprzedzeniem i umożliwiają pobranie po podaniu adresu e-mail. Archiwum waży około 11 MB. Najlepsze zdjęcia i link do pobrania wysyłamy e-mailem.
• Superfamous – duża kolekcja zdjęć z nietypowej perspektywy. Zestaw jest niewielki, ale ciekawy.
• Biblioteka wzorców - wzory i tekstury. Zestaw jest dość duży, szablony są nietypowe. Zastępuje się je przewijaniem i stopniowo. Możesz zobaczyć jak szablon będzie wyglądał na całym ekranie lub jego części.
• New Old Stock – archiwalne zdjęcia. Darmowych zdjęć jest niewiele, ale regularnie pojawiają się nowe.
• Pexels – duża ilość zdjęć na każdą okazję. Są one podzielone tematycznie, bardzo łatwo je przeszukiwać.
• Jay Mantri - duży zestaw zdjęć. Nie ma klasyfikacji jako takiej, można na nią patrzeć według miesięcy.

Grafika stockowa

• Brusheezy – darmowe pędzle, szablony, tekstury i nie tylko dla Photoshopa. 12 kategorii, każda z podkategoriami. Wybór jest ogromny.
• Iconfinder – ikony, zarówno płatne, jak i darmowe. Możesz pobrać w formatach ICO, PNG, ICNS, SVG.
• Brushez to duża kolekcja pędzli do programu Photoshop. Oprócz nich istnieją również prymitywy wektorowe, formularze, szablony, style. Każda sekcja jest podzielona na podrozdziały. Na przykład istnieje ponad 20 kategorii pędzli.
• Vecteezy to biblioteka grafiki wektorowej, zawierająca obrazy i ilustracje. Duża ilość kategorii i ogromna ilość grafik.
• Iconbird to rosyjskojęzyczna usługa wyszukiwania ikon. Możesz wprowadzić temat i uzyskać zestaw ikon lub przeglądać według kategorii.
• Icons8 to rosyjskojęzyczna usługa oferująca ponad 42 000 ikon na różne tematy.

Infografiki

• Vizualize to usługa internetowa służąca do tworzenia infografik „O mnie”. Zasadniczo tworzy graficzne CV.
• Canva to proste narzędzie do tworzenia dowolnego projektu. Pozwala zaprojektować prezentację, plakat, post na portalach społecznościowych, książki, listy, materiały i wiele więcej. Wszystko odbywa się w oparciu o szablony, zmienia się tekst. Ale istnieje wiele szablonów do wyboru.
• Łatwość – tworzenie infografik w oparciu o szablony. Wbudowany edytor online pozwala na zmianę projektu, umieszczenie dodatkowych elementów i zmianę tekstu.
• Infogram to usługa internetowa służąca do tworzenia infografik i interaktywnych diagramów. Nie wszystkie funkcje są dostępne; będziesz musiał kupić konto.
• Visage to proste narzędzie do tworzenia dowolnych treści wizualnych (wykresy, infografiki, obrazy na blogi itp.). Dużo szablonów, prosty edytor. Niektóre funkcje są płatne.
• Gliffy to usługa internetowa służąca do tworzenia diagramów. Edytor działa na zasadzie Microsoft Visio.
• Visme to narzędzie online służące do tworzenia prezentacji i infografik. Ponad 1000 szablonów. Edytor umożliwia dodawanie tekstu (nagłówki, listy, cytaty i zwykłe), tekstu animowanego oraz widżetów. Na bezpłatnym koncie możesz pobrać go jako plik JPG.
• Piktochart - Twórz wysokiej jakości grafiki - prezentacje, infografiki czy materiały drukowane. Przesyła PNG, JPG o różnych rozmiarach.
• Drawio to wygodna usługa internetowa służąca do tworzenia diagramów. Możesz zapisać w Dropbox i podobnych usługach lub na dysku.
• Venngage – łatwe tworzenie infografik, plakatów, raportów, materiałów na portale społecznościowe itp. W wersji darmowej udostępnia jedynie link do publikacji. Za pobranie musisz zapłacić.
• Cacoo to usługa internetowa służąca do rysowania diagramów i map witryn. Być może najlepszy pod względem możliwości. Duża ilość narzędzi i szablonów. Możesz eksportować do formatu PNG, PDF, SVG, PPT itp.
• Creately to internetowa usługa tworzenia diagramów. Dostępne wyłącznie do publikacji. Za pobranie pobierana jest opłata.
• Lucidchart to usługa internetowa służąca do tworzenia diagramów i rysunków. Istnieje możliwość importu diagramu Microsoft Visio. Eksportuje do formatu PDF, PNG i JPG. Dostępna płatna funkcjonalność.

Zabarwienie

• Color Hunt – wybór zestawień kolorystycznych. Możesz wybrać maksymalnie cztery kolory. Do wyboru są gotowe rozwiązania.
• TinEye – analizuje witrynę i wyświetla listę zasobów korzystających z obrazu z witryny.
• ColorZilla – umożliwia tworzenie kolorów i gradientów. Wyświetla dla nich właściwości css.
• Adobe Color CC – tworzenie schematów kolorów.
• Colicious – naciśnij spację i wygeneruj nowy kolor.
• Colorscheme - wybór schematów kolorystycznych. Dostępna jest wersja w języku angielskim i rosyjskim. Umożliwia wybór kolorów witryny. Ma możliwość precyzyjnego dostrojenia i pokazuje kod koloru. Docelowo umożliwia przeglądanie strony w wybranej kolorystyce. Największą zaletą jest oglądanie gamy pod kątem odchylenia percepcji kolorów. Umożliwia także wybór różnych modeli kolorystycznych. Zapisuje Gimp, CSS, PNG itp. w palecie. Posiada konwerter kolorów do konwersji z jednego modelu kolorów na inny.
• Paletton to narzędzie do tworzenia zestawień kolorystycznych. Nie różni się od Colorscheme.
• Pictaculous – analizuje paletę obrazu PNG, JPG lub GIF. Prześlij obraz i uzyskaj zestaw wszystkich kolorów, które są w nim obecne.
• Hex Color Tool – narzędzie do wyboru koloru. Użyj suwaków, aby dostosować kolor i wybrać jasność. Wybrany kolor zostanie następnie zapisany. Możesz wybrać paletę.
• (Un)clrd to wtyczka do przeglądarki, która usuwa wszystkie kolory i pozostawia witrynę czarno-białą.
• BrandColors - największy zbiór oficjalnych kodów kolorów marki. Wybierz nazwę marki i pobierz nazwy jej kolorów wraz z plikiem css.
• Colortyper - dobór kolorów pod nietypowym kątem. Na ekranie widoczne są wielokolorowe symbole, które się przecinają. Wynikiem skrzyżowania jest nowy kolor. Wygląda interesująco.

Inspiracja

• Dribbble - Największa społeczność projektantów. Praca, społeczność, komunikacja – tutaj znajdziesz wszystko.
• Freebble - szablony i projekty z Dribbble. Niektóre rzeczy można pobrać za darmo, inne można kupić. Znajdziesz tu szablony dla CMS-ów, projektantów, ikon, makiet, zaprojektowanych szablonów stron internetowych i wiele więcej.
• Muzli - Codzienna inspiracja projektowa. Źródło dla projektantów zawierające przykłady najbardziej niezwykłych dzieł.
• Awwwards - najlepsze osiągnięcia projektantów. Zorganizowany jako lokalny portal do głosowania. Wybrano witrynę dnia, miesiąca, roku itp. Duża liczba projektów, filmów, zmian.
• Design You Trust to społeczność projektantów dzielących się najnowszymi trendami, aktualnościami, portfolio, projektami i kreatywnymi ogłoszeniami.
• Naprawdę dobre e-maile — ogromna kolekcja dobrze zaprojektowanych e-maili. Wybierz szablon i uzyskaj jego kod HTML, CSS i js. Możesz zmieniać tekst, obrazy itp.
• Fubiz – publikacje z zakresu designu i kreatywności. Można tu znaleźć zdjęcia, projekty, grafiki, filmy itp. Wszystko podzielone jest na kategorie.
• Designspiration to kolekcja projektów w stylu Pinteresta. Ogromna liczba pomysłów i przykładów - typografia, logo, litery i wiele więcej.
• Behance to zbiór portfolio profesjonalistów. Możesz zostawić wakat lub CV.
• Wzory mobilne – biblioteka zrzutów ekranu iOS i Android. Wszystko jest podzielone na sekcje. Można znaleźć wiele pomysłów.
• One Page Love to galeria najlepszych projektów stron internetowych. Możesz kupić szablony i motywy. Są też darmowe.
• Uispace jest źródłem informacji dla projektantów. Możesz pobrać psd, szkic, czcionki, makiety itp. za darmo.

Redaktorzy graficy

• DAZ 3D - modelowanie 3D. Zarejestruj się i pobierz aplikację komputerową.
• Gimp jest darmowym odpowiednikiem Photoshopa. Umożliwia dostosowywanie siatki modułowej, tworzenie linii pomocniczych, pracę z warstwami, dodawanie efektów itp. Jest dobrym darmowym zamiennikiem Photoshopa. Jest rozszerzalny - możesz pobrać dodatkowe wtyczki.
• Blender - modelowanie 3D, animacja, renderowanie, dźwięk, wideo. Umożliwia tworzenie gier. Szybko rozwijający się redaktor, bardzo popularny.
• Aviary to internetowa usługa edycji zdjęć. Wiele opcji, w tym efekt czerwonych oczu, zmiana rozmiaru itp.
• Pixlr to internetowy edytor zdjęć i osobny edytor graficzny. Ten ostatni wygląda jak Photoshop. Zapisuje na dysku.
• BeFunky to internetowa usługa edycji zdjęć. Efekty, ramki, grafika, retusz i wiele więcej. Dostępny jest interfejs w języku rosyjskim.
• Inkscape to kompletny edytor grafiki wektorowej typu open source. Obsługuje możliwości formatu SVG - pracę z kształtami, konturami, tekstem, wektoryzację grafiki rastrowej itp. Oprócz obróbki obrazów wektorowych umożliwia utworzenie szablonu strony internetowej i jego wycięcie - dostępna jest siatka modułowa. Umożliwia rysowanie tła, banerów, logo wektorowych itp.
• IconEdit2 to bardzo prosty program do rysowania ikon. Posiada filtry. Umożliwia eksport obrazu dla systemów Android i Apple. Możesz dostosować głębię kolorów, obrócić i dostosować ikonę. Obsługuje przezroczystość, wiele obrazów na plik ICO i wygładzanie we wszystkich narzędziach do rysowania.
• Falco GIF Animator to program do tworzenia animacji klatka po klatce i animowanych ikon. W zasobie możesz pobrać wiele różnych programów.
• Krita to profesjonalny edytor komputerowy typu open source. Dostępne dla różnych systemów operacyjnych.
• Boxy-SVG to edytor grafiki wektorowej podobny do programów Adobe Illustrator, Sketch i Inkscape.
• Photopos to wielofunkcyjny program, posiadający funkcje edytora zdjęć, edytora graficznego oraz aplikacji do tworzenia grafiki komputerowej.
• 5Dfly to bezpłatna aplikacja do wsadowego przetwarzania zdjęć. Potrafi tworzyć pokazy slajdów za pomocą programu PowerPoint. Konwerter PDF można pobrać osobno.
• PaintStar to darmowy edytor obrazów. Interfejs jest bardzo podobny do Painta, ale ma więcej opcji. Warstwy np.
• PhotoScape to prosty edytor zdjęć. Posiada funkcje regulacji jasności i koloru, balansu bieli, korekcji podświetlenia, ramek, dymków, trybu mozaiki, dodawania tekstu, rysowania obrazów, kadrowania, filtrów, usuwania efektu czerwonych oczu, koloryzacji, pędzla, stempla klonującego, pędzla efektowego itp.

Cześć wszystkim! Dzisiaj w ramach sekcji projektowania stron internetowych chcę porozmawiać o czcionkach, których należy używać podczas tworzenia strony internetowej.

Z reguły nie wszyscy zastanawiają się, jakich czcionek należy użyć w części merytorycznej witryny. Wybór pięknych czcionek dla strony internetowej jest najważniejszą częścią rozwoju projektu. Od tej części zależy bowiem czytelność informacji znajdujących się na stronie, a to, jak wiemy, jest na stronie najważniejsze. Z tego powodu kwestię tę należy potraktować bardzo poważnie.

Jednak w projektowaniu stron internetowych można używać wyłącznie czcionek dostępnych dla przyszłych odwiedzających witrynę. Ma to na celu zapewnienie prawidłowego wyświetlania stron wszystkim użytkownikom, posiadającym różne systemy operacyjne i przeglądarki. W przeciwnym razie, jeśli użyjesz niestandardowych czcionek, większość odwiedzających zobaczy wszystko inaczej i w większości przypadków w nieestetyczny sposób. Z tego powodu zaleca się stosowanie standardowych czcionek wymienionych poniżej. Lista czcionek obejmuje czcionki zainstalowane w systemie operacyjnym Windows XP i nowszych.

W tym artykule nie biorę pod uwagę czcionek z innych systemów operacyjnych. Doświadczony projektant układu powinien znać porównanie czcionek w różnych systemach operacyjnych, a podczas układania napisze ten punkt w stylach CSS.

Zasadniczo przy opracowywaniu merytorycznej części projektu stosowane są dwa rodzaje czcionek:

• czcionki szeryfowe
• czcionki bezszeryfowe

Czcionki szeryfowe- (angielski szeryf - szeryf) czcionki, których styl zaczyna się i kończy na kreskach. Na przykład Times New Roman.

Czcionki bezszeryfowe(czcionki posiekane) - (angielski bezszeryfowy - bezszeryfowy) czcionki o ścisłych, prostych liniach bez szeryfów. Na przykład Arial.

Poniżej możesz zobaczyć zrzut ekranu czcionek szeryfowych i bezszeryfowych.

Czcionki do projektowania stron internetowych:

• Arial
• Arial Czarny
• Arial wąski
• Zarezerwuj Antiquę
• Gotyk stulecia
• Komiks Sans MS
• Kurier Nowy
• Średni gotyk Franklina
• Gruzja
• Uderzenie
• Konsola Lucida
• Lucida bez Unicode
• Microsoft bezszeryfowy
• Linotyp Palatino
• Sylfaen
• Tahoma
• Times New Romana
• Trebuchet MS
• Verdana
• Taśmy (różne symbole i oznaczenia)
• Skrzydła (różne symbole i znaki)

Chciałbym również zwrócić uwagę na brak kursywy w wielu czcionkach; zamiast kursywy stosuje się pochylenie, co utrudnia czytanie tekstu.

Ze standardowych czcionek w systemie Windows, które nie mają kursywy:

• Arial Czarny
• Komiks Sans MS
• Średni gotyk Franklina
• Uderzenie
• Konsola Lucida
• Lucida bez Unicode
• Microsoft bezszeryfowy
• Sylfaen
• Tahoma

Ponieważ wspomniałem o czcionkach, które nie mają kursywy, chciałbym również zwrócić uwagę na fakt, że istnieją czcionki, które początkowo są czcionkami pogrubionymi. Z tych powodów nie ma sensu używać stylów wskazujących pogrubioną czcionkę, ponieważ wynik nie będzie taki, jakiego potrzebujemy.

Istnieje wiele sposobów na znalezienie odpowiedniej czcionki dla swojej witryny. Na przykład możesz korzystać z usług z ogromnymi bibliotekami czcionek, które wymagają płatnej subskrypcji.

Jeśli masz ograniczony budżet lub eksperymentujesz z małym projektem, możesz używać bezpłatnych czcionek internetowych, które są publicznie dostępne. Znalezienie odpowiedniej czcionki internetowej dla Twojej witryny może być czasochłonne, dlatego przedstawiamy wybór najlepszych spośród nich.

1. Montserrat

W miarę ewolucji typografia odchodzi od klasycznych plakatów i znaków miejskich. Twórczyni tej czcionki starała się zachować piękno typografii miejskich plakatów, które widziała na ulicach Buenos Aires.

2. Abril Fatface

Abril Fatface jest częścią dużej rodziny czcionek dostępnej w 18 stylach stworzonych do różnych celów. Ta czcionka ma mocny, elegancki wygląd, co czyni ją doskonałym rozwiązaniem do tworzenia przyciągających wzrok nagłówków. Najczęściej łączony jest z Lato, Open Sans i Droid Sans.

3. Wyświetlacz Playfair

Biorąc pod uwagę znaczną wysokość x i małe indeksy dolne liter, Playfair Display nadaje się również do pisania nagłówków, zwłaszcza jeśli przestrzeń jest ograniczona. Dobrze komponuje się z Gruzją i jest często używany z Oswaldem, Lato i Arvo.

4. GT Walsheim

Używany dziś na wielu blogach, GT Walsheim jest przedstawicielem geometrycznych znaków bezszeryfowych i jest częścią rodziny Grilli Type. Za pełny zestaw czcionek trzeba zapłacić, ale Grilli Type oferuje bezpłatną wersję próbną GT Walsheim.

5. Merriweather

Jeśli czytelność na ekranie jest dla Twojego projektu priorytetem, sprawdź Merriweather, który został stworzony w tym celu. Ponadto czcionka ta jest stale udoskonalana.

6. Józefina Sans

Josefin Sans inspirowana jest szwedzkim designem w stylu vintage i charakteryzuje się elegancką, geometryczną estetyką.

7. Gravitas Jeden

Gravitas One opiera się na „UK Fat Face”, odważnej czcionce reklamowej, która pojawiła się podczas rewolucji przemysłowej w Anglii. Ta czcionka wygląda świetnie w średniej i dużej skali i nadaje się do nagłówków, tytułów i zakładek.

8. jura

Litery tej czcionki powtarzają formy litery Kaya-li. Zawiera także glify cyrylicy i alfabetu greckiego. Jest dostępny w gramaturach lekkich, normalnych, średnich i odważnych.

9.Liga Gotycka

Oryginalnie zaprojektowany przez Morrisa Fullera Bentona dla American Type Founders Company w 1903 roku, League Gothic znalazł nowe zastosowanie dzięki aktualizacji i dodaniu nowych glifów.

10. Fiord

Fjord to czcionka szeryfowa stworzona pierwotnie dla książek drukowanych i szczególnie odpowiednia do umieszczania długiego tekstu w małym formacie druku. Można go wykorzystać do stworzenia dużej ilości treści tekstowych na stronie, gdyż czcionka ma przejrzystą strukturę, wydatne szeryfy oraz długie, eleganckie główki i nóżki.

11. Amarant

Rodzina czcionek Amaranth charakteryzuje się nieukośną kursywą, niewielkim kontrastem i zauważalnymi krzywiznami. Wszystkie trzy style Amaranth dobrze komponują się z niemal każdą inną czcionką. Możesz pobawić się tą czcionką - poeksperymentuj i wybierz najlepszą.

12. Poli

Ta czcionka o średnim kontraście została pierwotnie stworzona dla rodzimego języka Wayuunaiki, który wymaga szerokich glifów. Ma małe łodygi i dużą wysokość x, dzięki czemu jest szczególnie przydatny w małych rozmiarach.

13. Gentium Basic

Czcionka ta została stworzona jako czcionka wielojęzyczna, obejmująca litery łacińskie i greckie, a także cyrylicę i zaawansowaną obsługę w wersji Gentium Plus. Gentium Basic i Gentium Book Basic są dostępne w bezpłatnej wersji internetowej, ale są ograniczone wyłącznie do alfabetu łacińskiego.

14. Otwórz Sansa

Open Sans to przedstawiciel humanistycznej groteski. Czcionka ta jest bardzo czytelna i dostosowuje się zarówno do interfejsów internetowych, jak i mobilnych. Jest to czcionka nieskośna o prostym stylu liter, która charakteryzuje się neutralnym, ale na tyle przyjemnym wyglądem, że można ją wykorzystać do różnorodnych celów.

15. Księga Zwykła

Jest to czcionka wielofunkcyjna o dużej wysokości x, mocnym kontraście kolorów i dobrze zdefiniowanych szeryfach, które wpływają na czytelność tekstu. Czcionka ta wygląda dobrze zarówno w druku, jak i na ekranie o niskiej rozdzielczości.

16. Signika

Ta bezpłatna czcionka internetowa reprezentuje czcionkę bezszeryfową. Niski kontrast i wysoka wysokość x pozwalają Signice dobrze wyświetlać się na ekranie. Szeroki wybór ikon obejmuje symbole, piktogramy i strzałki.

17. Józefina Slaba

Stworzona według kanonów czcionki geometrycznej typowej dla lat 30. XX wieku, z dodatkiem cech skandynawskich, Josefin Slab ma cechy czcionki płytowej i przypomina czcionkę maszyny do pisania. Co ciekawe, jego wysokość x jest połową wysokości dużej litery.

18. Forum

Jak sama nazwa wskazuje, jest to czcionka rzymska, która nadaje się do nagłówków z caps lockiem, ale nadaje się również do wyświetlania tekstu. Eleganckie proporcje tej czcionki nawiązują do architektury klasycznej z jej półkolistymi łukami, poziomymi gzymsami i pionowymi kolumnami.

Nazwane na cześć jednego z najsłynniejszych miast Majów, Tikal Sans ma cechy glifów używanych w piśmie cywilizacji Ameryki Południowej. Jej twórca wybrał dużą wysokość x, co nadaje czcionce nowoczesny wygląd i korzystnie wpływa na jej czytelność, a duży wybór stylów pozwala na wykorzystanie jej do różnorodnych celów.

20. Arvo

Ta geometryczna czcionka płytowa, odpowiednia zarówno do druku, jak i do Internetu, jest dostępna w językach łacińskim, kursywą, rzymską pogrubioną i pogrubioną kursywą. Niski kontrast Arvo zwiększa jego czytelność na ekranie.

21. Bevana

Bevan powstał w oparciu o tradycyjną czcionkę płytową z lat 30. XX wieku. Litery zostały zdigitalizowane, nadano im nowy kształt i zoptymalizowano pod kątem wersji internetowej. Jest to jedna z niewielu bardzo odważnych czcionek, które nadają się do stron internetowych.

22. Stary standard TT

Old Standard TT powstał w oparciu o czcionkę szeryfową Modern, która była popularna na przełomie XIX i XX wieku, a potem na długo została zapomniana. Ta czcionka nadaje się do dodawania stylu do określonego rodzaju treści, takich jak badania naukowe lub teksty w języku greckim lub cyrylicy.

23. Kreon

Idealna do serwisów informacyjnych i blogów, ta czcionka szeryfowa ma również cechy czcionki płytowej, ale jej równowaga i niski kontrast sprawiają, że Kreon jest znacznie bardziej osobisty.

24. Droid Sans

Droid Sans został zoptymalizowany pod kątem maksymalnej czytelności nawet w małych interfejsach, takich jak menu na ekranach telefonów komórkowych. Jest to neutralna, nieskośna czcionka z prostymi, otwartymi literami.

25. Włoszka

Twórca tej czcionki inspirował się klasyczną włoską kaligrafią, dlatego czcionka będzie bardzo przydatna przy projektach, w których trzeba dodać elegancji. Italiana nadaje się również do pisania nagłówków wiadomości zarówno w formacie drukowanym, jak i elektronicznym.

26. Vollkorn

Ta szczegółowa, bogata w funkcje czcionka szeryfowa jest bardzo popularna. Jej przejrzystość i solidność dodają pewności i energii, dzięki czemu czcionka jest równie skuteczna w przypadku większych rozmiarów nagłówków i tytułów, a także dużych ilości tekstu w mniejszych formatach.

27. Aktor

Czcionka ta ma szczególnie dużą wysokość x, co wymaga sporo miejsca. Aktor charakteryzuje się także staromodnym stylem niektórych postaci, na przykład cyfr 6 i 9.

Humanistyczny krój pisma Garamond, którego korzenie sięgają XVI wieku, stał się prawdziwą ikoną typograficzną, często służącą jako podstawa do tworzenia nowoczesnych krojów, w tym EB Garamond.

31. Ubuntu

Ubuntu Grotesque zostało stworzone, aby personalizować tekst internetowy zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Zachęcamy użytkowników do eksperymentowania z tą czcionką, modyfikowania jej i ulepszania według własnego uznania.

32. Różaniec

Rosario to klasyczny humanistyczny znak bezszeryfowy, który idealnie nadaje się do stylizacji akapitów tekstu.

33. Płyta Robota

Roboto Slab to jedna z czcionek z rodziny Roboto. Wersja blokowa szczególnie przyciąga wzrok geometrycznymi kształtami i otwartymi krzywiznami. Nadaje się równie dobrze do ekranów gadżetów, jak i do drukowanych wersji tekstów.

34. Oswalda

Czcionka jest przerobioną wersją klasycznej czcionki bezszeryfowej Alternate Gothic. Niedawno zaktualizowano Oswalda, dodając różne wagi, rozszerzony zestaw znaków i lepszy kerning.

35. Pat

Pat to elegancka, odręczna czcionka z odrobiną stylu vintage. Nadaje się do tworzenia akcentów i personalizacji witryny internetowej.

36. Szkarłatny tekst

Ta starannie zaprojektowana klasyczna czcionka proporcjonalna może być używana zarówno do wyświetlania dużej ilości tekstu, jak i do pisania nagłówków.