30 najlepszych zasobów typograficznych online
Wygląda na to, że wśród projektantów stron internetowych są dwa obozy: ci, którzy wykorzystują typografię sieciową , eksperymentują z nią i próbują nowych rzeczy w praktycznie wszystkich swoich projektach; i tych, którzy unikają go jak zarazy, decydując się na używanie standardowych, bezpiecznych dla sieci fontów o niewielkiej zmienności.
Wygląda na to, że wielu projektantów, którzy należą do drugiej grupy, żałuje, że nie byli bardziej podobni do pierwszych.
Poniższe zasoby mogą pomóc ulepszyć Twoją typografię internetową, niezależnie od tego, w którym obozie się znajdujesz.
Istnieją narzędzia do tworzenia unikatowej typografii, odnośników i artykułów, które mogą nauczyć Cię zasad typograficznych, a także mnóstwo inspiracji i nowości, które pozwolą Ci na bieżąco informować Cię o stanie typografii internetowej.
Narzędzia typograficzne
Typetester
Typetester umożliwia porównywanie do trzech czcionek obok siebie przy użyciu dowolnego przykładowego tekstu. Możesz określić podstawowy rozmiar czcionki, krój pisma, rozmiar, prowadzenie, śledzenie, wyrównanie, odstępy między słowami, dekorację, kolor i kolor tła, aby uzyskać bardzo dokładny obraz tego, jakie czcionki będą wyglądać na rzeczywistej stronie. Następnie, gdy wszystko będzie wyglądało dokładnie tak, jak chcesz, możesz pobrać CSS.
HTML Ipsum
HTML-Ipsum jest generatorem lorem ipsum przeznaczonym specjalnie do projektowania stron internetowych. Zamiast podawania fragmentów tekstu, HTML-Ipsum może dostarczyć wstępnie sformatowany tekst, taki jak akapity, uporządkowane listy, puste tabele, formularze i listy nawigacyjne. Wstępnie sformatowany tekst jest świetnym sposobem na zaoszczędzenie czasu podczas tworzenia makiet stron i wstępnych projektów.
Typechart
Aplikacja Typechart umożliwia przeglądanie wstępnie sformatowanych, bezpiecznych czcionek internetowych i wyświetlanie ich w postaci, w jakiej będą wyświetlane zarówno na komputerze z systemem Windows, jak i na komputerze Mac. Możesz sortować czcionki w zależności od rozmiaru, kroju czcionki i nacisku.
WP-Typografia
WP-Typography to wtyczka WordPress, która pomaga uatrakcyjnić standardową typografię WP. Obsługuje dzielenie wyrazów, kontrolę odstępów, inteligentne zastępowanie znaków (w tym cudzysłowy, kreski, elipsy i symbole matematyczne) oraz przechwyty CSS do stylizowania określonych rzeczy (w tym znaków ampersand, akronimów i liczb).
Zestaw typów CSS
Zestaw czcionek CSS pozwala na stylizację bloku tekstu, a następnie skopiowanie CSS. Jest to prosty generator CSS, który doskonale nadaje się do stylizacji jednej czcionki na raz. Pozwala kontrolować krój czcionki, rozmiar, odstępy, prowadzenie, dekorację i kolor.
Rzut typowy
Flipping Typical pokazuje przykładowy tekst w różnych czcionkach zainstalowanych na komputerze. Jest to świetny sposób na porównywanie wielu czcionek, obok siebie, naraz. Jedyne zastrzeżenie: tylko niektóre z wyświetlonych czcionek są bezpieczne w Internecie.
Typograficzna siatka
Ustalony pionowy rytm jest jedną z rzeczy, które odróżniają świetną typografię od dobrej typografii. Grid Typograficzny pomaga ci ustanowić pionowy rytm. Zawiera również pionową siatkę jako przewodnik do pozycjonowania zarówno typografii, jak i innych elementów.
Jaka czcionka
WhatTheFont zapewnia łatwy sposób, aby dowiedzieć się, jaka jest konkretna czcionka. Po prostu prześlij obraz (lub podaj adres URL), a WhatTheFont określi, która czcionka jest używana. To świetny sposób na znalezienie czcionek, które były używane w obrazach lub plikach Flash.
CSS z pionowym rytmem
Jak już wspomniano, spójny pionowy rytm wyznacza doskonałą typografię poza tym, która jest tylko "dobra". To narzędzie może pomóc w tworzeniu CSS dla typografii, która ma stały pionowy rytm. Wystarczy wprowadzić rodzinę czcionek, podstawowy rozmiar czcionki, wysokość linii bazowej oraz docelowe rozmiary czcionek i obliczenia, aby uzyskać CSS dla uzyskania jednolitego rytmu pionowego.
Podstawowy kalkulator rytmu
Kolejny świetny pionowy kalkulator rytmiczny. Ten jednak pokaże Ci, jak różne rozmiary czcionek wyglądają obok siebie, gdy skonfigurujesz je z ustalonym pionowym rytmem. To świetny sposób, aby upewnić się, że wszystkie rozmiary czcionek, które używasz, będą wyglądały dobrze.
Font Burner
Font Burner pozwala osadzać czcionki na twoich stronach internetowych za pomocą SIFR, używając interfejsu graficznego. Obecnie dostępnych jest ponad 1000 czcionek za pomocą programu Font Burner, a także dostępna jest wtyczka WordPress. Wszystko, co musisz zrobić, aby go użyć, to znaleźć czcionkę, której chcesz użyć, skopiuj kod do umieszczenia na stronie, a następnie wklej go do kodu swojej witryny.
Generator tekstów w ciemno
Ten dummy generator tekstów pozwala tworzyć nie tylko lorem ipsum, ale także wiele innych tekstowych typów fikcyjnych. W tym samym czasie możesz również sformatować ten tekst bezpośrednio w generatorze (kliknij Opcje zaawansowane), a następnie skopiuj kod CSS.
Linia bazowa
Linia bazowa to struktura siatki i typografii, która zawiera pliki resetujące domyślne ustawienia przeglądarki i buduje podstawowy układ typograficzny. Jest to dobra opcja dla projektantów, którzy chcą korzystać z układu siatki, a także potrzebują pomocy przy projektowaniu typografii witryny. Konfiguracja typografii obejmuje nagłówki, listy, akapity, cytaty z bloków i tabele, a także kilka innych kodów znaczników.
Matrix czcionki
Font Matrix wyświetla czcionki zawarte w systemach operacyjnych Mac i Windows, pakiet Microsoft Office i pakiet Adobe Creative Suite, wszystkie w siatce ułatwiającej sprawdzenie, które czcionki są najbardziej prawdopodobne na typach komputerów. Na przykład, jeśli Twoja witryna jest przeznaczona głównie dla projektantów, możesz utworzyć pierwszy krój pisma czcionkowego w pakiecie Adobe Creative Suite, a jeśli strona jest skierowana do użytkowników biznesowych, pierwszą czcionką może być coś z pakietu Microsoft Office.
Typograf
Typograf pozwala eksperymentować z różnymi skalami i innymi elementami rytmu pionowego. Zawiera wiele tradycyjnych skal (w tym Le Corbusier i Fibonacci), a także inne opcje układu.
Usługi czcionek internetowych
Typekit
Typekit oferuje czcionki różnych typów sprzedawców i odlewni, w tym The League of Movable Type, FontFont i Veer (możesz przeglądać całą listę czcionek bez konieczności zakładania konta). Oferują również zaawansowane opcje sterowania stylem czcionek, nieskończoną skalowalność i kolofon, który informuje użytkowników o czcionkach używanych w witrynie. Ceny za Typekit są rozsądne, począwszy od bezpłatnego dostępu częściowego do 100 USD rocznie w przypadku witryn o dużym natężeniu ruchu.
Kernest
Kernest to usługa czcionek internetowych wykorzystująca czcionki OFL, GPL, GUST i Creative Commons, a także te z licencjami komercyjnymi. Wiele z ich czcionek jest darmowych (sama usługa jest bezpłatna), podczas gdy inne mają abonament od kilku dolarów.
Czcionki na żywo z Ascender
Ascender oferuje własną usługę czcionek internetowych Fonts Live. Dostępne są ponad 110 krojów czcionek: Monotype, Microsoft, Bigelow & Holmes i inne, a także własne czcionki.
Google Font API
Google oferuje ograniczony wybór czcionek internetowych o otwartym kodzie źródłowym. Chociaż wybór nie jest duży, jest bezpłatny i wspierany przez Google, co oznacza, że prawdopodobnie nie wystąpią problemy z pojemnością lub opóźnieniem.
TypeFront
TypeFont nieco inaczej różni się od czcionek internetowych. Zamiast oferować bibliotekę przyjaznych czcionek internetowych, pozwalają na przesyłanie własnych czcionek zawierających licencję przyjazną dla sieci. Jest to doskonała opcja, jeśli czcionki, których chcesz użyć, nie są obecnie oferowane przez żadną inną usługę czcionek internetowych. Dostępny jest bezpłatny plan miejsc o małym natężeniu ruchu oraz płatnych.
Czcionki typotheque web
Typotheque oferuje własną usługę czcionek internetowych, dzięki której ich czcionki są dostępne dla implementacji @ font-face. Zaletą jest to, że istnieje tylko jednorazowy koszt licencji, który może obejmować zarówno drukowanie, jak i aplikacje internetowe. Minusem jest to, że wybór jest ograniczony tylko do ich czcionek.
Zasoby i artykuły typograficzne
Elementy stylu typograficznego stosowane w Internecie
Jest to bardzo dokładny przewodnik dla każdego, kto chce nauczyć się nie tylko podstaw dobrej typografii internetowej, ale także bardziej zaawansowanych technik i zasad. Jest podzielony na rozdziały i podrozdziały, w tym ruch poziomy i pionowy, bloki i akapity, paginacja, rozmiar i wiele więcej. Jest to praca w toku, więc oczekuj więcej informacji w przyszłości.
Ładny typ sieci
Nice Web Type zawiera mnóstwo informacji na temat implementacji typografii internetowej. Mają "notatki" o wszystkim, począwszy od rozpoczynania od typografii sieciowej po używanie CSS @ font-face. Regularnie omawiają trendy i nowe pomysły i mają stronę poświęconą temu, co uważają za jedne z najlepszych czcionek.
12 Przykłady typografii akapitowej
Ta kolekcja przykładowych formatów akapitowych od Jon Tan stanowi doskonały punkt wyjścia dla każdego, kto projektuje ciężką tekstowo witrynę. Wielu projektantów zapomina o wszystkich możliwościach związanych z stylizacją akapitów i wybiera bardziej tradycyjne, konserwatywne opcje. Ten artykuł dowodzi, że nietrudno wyjść z pudełka i zrobić coś interesującego z akapitami w twoich projektach.
Kontrast typograficzny i przepływ
To fantastyczny przewodnik od WebDesignerWall na temat zasad przepływu i kontrastu w typografii internetowej. Rozkłada te zasady na kilka sekcji, w tym rozmiar, krój pisma / klasyfikację, kolor i wagę.
Poprawiony stos czcionek
W tym artykule omówiono rozwijanie popularnych bezpiecznych stosów czcionek CSS, wykorzystując inne popularne czcionki. Omówiono także stosy czcionek niektórych popularnych witryn internetowych wraz z zaleceniami, w jaki sposób mogą poprawić swoje stosy.
On Web Typography
Artykuł Jason Santa Maria na A List Apart to bardzo obszerne spojrzenie na kroje pisma w projektach Twojej witryny. Jest to temat, który nie jest często omawiany, ale ma ogromne znaczenie w tworzeniu doskonałych projektów typograficznych w Internecie.
Myślenie z typem
Thinking with Type to strona towarzysząca do książki o tym samym tytule autorstwa Ellen Lupton. Oferuje mnóstwo podstawowych informacji na temat typografii. Podczas gdy większość z nich koncentruje się na typografii drukarskiej, wiele informacji może być zastosowanych do typografii internetowej.
10 świetnych wskazówek, jak poprawić swoją typografię w Internecie
Lista dziesięciu prostych rzeczy, które możesz zrobić, aby poprawić typografię w swoich projektach stron internetowych. Zawiera informacje na temat czcionki, rozmiaru, skali i hierarchii, wiodących i innych.
Inspiracje typograficzne, trendy i aktualności
Typophile
Typophile to forum dla entuzjastów kroju pisma i typografów. Jeśli chcesz dowiedzieć się, co dzieje się w świecie typografii, Typophile to świetne miejsce do oglądania. Jest to również dobre miejsce, aby uzyskać pomoc w razie problemów związanych z typografią.
Uwielbiam typografię
ILT to blog poświęcony wyłącznie typografii. Omawia zarówno tematykę projektową, jak i biznesową, z profesjonalnego punktu widzenia. Ich archiwum jest ogromne, więc jest mnóstwo informacji o bieżących i przeszłych wiadomościach i trendach, które pozwolą ci być zajęci.
uwielbiamy typografię
WLT to galeria typografii, liternictwa, oznakowania i innego typu. Użytkownicy mogą przesyłać obrazy typu, który kochają, i jest to świetne miejsce, aby wybrać inspirację typograficzną dla swojego kolejnego projektu.
Typografia dla Nagłówków
Elements of Design ma wspaniałą galerię ponad 120 przykładów typografii czołowej. Prowadzą gamut od prostych do złożonych, w różnych krojach i stylach. To doskonałe miejsce, jeśli szukasz trochę inspiracji. Mają też galerię Wyciągaj cytaty z ponad 20 przykładami.
Typographica
Typographica oferuje recenzje typów, komentarze i recenzje książek typograficznych. Ich recenzje typów są szczególnie pouczające, jeśli chcesz się dowiedzieć, co sprawia, że krój jest dobry.
Za kulisami znakomitej typografii sieci
Jest to właściwie pierwsza z pięcioczęściowej serii. Ten post wygląda na typografię za A List Apart, rozbicie czcionek i stylów używanych w różnych częściach witryny. Kolejne posty to: Jesús RodrÃguguez Velasco , Jon Tan , Designr.it , i The Codex Transportica .
Typesites
Typesites to blog, który regularnie prezentuje świetne projekty typografii internetowej. Witryny, które się w nich znajdują, są różnorodne, ale wszystkie zawierają inspirujące wykorzystanie typu.
Opracowany wyłącznie dla Webdesigner Depot przez Cameron Chapman