15 przydatnych narzędzi do typografii internetowej, bibliotek i ram

Radzenie sobie z typografią w sieci było naprawdę dziwaczne. Każda przeglądarka ma własny algorytm renderowania czcionek co może prowadzić do nieoczekiwanych rozbieżności. Istnieje tylko kilka właściwości CSS, których możesz użyć, aby mieć pewną kontrolę nad czcionkami, takich jak kerning czcionek, wygładzanie czcionek, tworzenie DropCaps itp. Ponadto musimy radzić sobie z wieloma problemami z układem czcionek.

Dobrą wiadomością jest to, że istnieją zasoby, które można wykorzystać do przejęcia kontroli nad typografią witryny. Tu są 15 narzędzi internetowych, bibliotek i ram możesz użyć do tego celu.

Więcej o Hongkiat:

9 wtyczek WordPress do robienia więcej z czcionkami
20 najlepszych wtyczek do typografii WordPress w celu zwiększenia czytelności
Lepsze i ostrzejsze ikony interfejsu użytkownika z czcionkami internetowymi

Renderowanie typu

W skrócie, Renderowanie typu działa podobnie do Modernizr, ale tylko identyfikuje silnik przeglądarki do renderowania czcionek. Ta biblioteka dodaje niestandardowe klasy oparte na jej odkryciach, które można wykorzystać do zastosowania określonych reguł stylizacji do renderowania typów.

KerningJS

Kerning nie jest jeszcze dostosowywany do użytku w sieci - kerning czcionek wsparcie jest wciąż słabe - ale nowa standardowa nieruchomość zbliża się do nas. KerningJS jest biblioteką JavaScript, która daje na przykład kilka nowych właściwości dla lepszej kontroli kerningu -list-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Należy pamiętać, że powyższy przykład jest niestandardowy i dotyczy tylko KerningJS.

DropcapJS

Chociaż tworzenie dropcapów jest możliwe dzięki obecnym standardom CSS, wynik nie jest jeszcze doskonały. Czasami jest to wręcz niepożądane. DropcapJS, opracowany przez Adobe Web Platform, ma za zadanie pozwolić projektantowi stron internetowych na łatwe umieszczenie idealnego dropcap.

LiningJS

LiningJS to biblioteka JavaScript, która dodaje linia klasa w każdym wierszu akapitu. Pozwala to na stylizowanie linii osobno. Symuluje ideę :: nth-line (), :: nth-last-line () i ::Ostatni wiersz pseudoklasy, których jeszcze nie ma w CSS. Oto przykład, w jaki sposób stylujemy pierwszy wiersz akapitu za pomocą LiningJS:

 p .line [first] font-weight: 600; text-transform: wielkie litery;

Ponadto LiningJS obsługuje również chiński przepływ akapitów.

Podkreślenie JS

Podkreślenie JS to biblioteka JavaScript, która lepiej podkreśla tekst. Sprawdź demo, aby zobaczyć, co mam na myśli, upewnij się, że najedziesz na linie. Porównaj demo z podkreślonym wyjściem bieżącego CSS dekoracja tekstowa standard i prawdopodobnie byłbyś również fanem underlineJS.

FlowType

Ta wtyczka dynamicznie dostosuje rozmiar czcionki na podstawie określonej szerokości opakowania. FlowType pomaga zastosować idealną liczbę znaków na linię przy dowolnej szerokości ekranu. Biblioteka zawiera opcje, w których można ustawić minimalną / maksymalną szerokość ekranu, minimalny / maksymalny rozmiar czcionki i współczynnik czcionki.

HatchShow

HatchShow rozszerza rozmiar czcionki, aby wypełnić całą szerokość jej kontenera. Wtyczka działa po wyjęciu z pudełka z algorytmem; w skrócie, mierzy szerokość pojemnika i długość czcionki i dołącza odpowiedni rozmiar czcionki.

GridLover

GridLover to świetne narzędzie do generowania podstawowych stylów dla układu typografii (rozmiar, wysokość linii i margines) za pomocą łatwego suwaka interfejsu użytkownika. Generuje style w SCSS, LESS i Stylus, dzięki czemu można je od razu włączyć do projektu, niezależnie od używanego preprocesora CSS.

TypeScale

TypeScale to narzędzie online, które pomoże Ci łatwo określić odpowiedni rozmiar czcionki na swojej stronie. Narzędzie udostępnia prosty intuicyjny interfejs graficzny, który umożliwia wstawienie podstawowego rozmiaru czcionki, skali i rodziny czcionek, których chcesz użyć. Wyniki będą wizualizowane dla Ciebie, abyś mógł bawić się skalą, aby uzyskać odpowiednią wartość. Po zakończeniu pobierz CSS.

Skala modułowa

Skala modułowa to narzędzie do generowania idealnego skalowania czcionek dla tekstu treści i nagłówka. Wyprowadza w Sassie, który powinien być używany w połączeniu z jego biblioteką Sass. Alternatywnie możesz użyć JavaScript .

Czcionka do szerokości

Font-To-Width (FTW) to biblioteka JavaScript, która sprawia, że czcionka pasuje do jej kontenera szerokości. Określa rozmiar czcionki wraz z odstępami między wyrazami wymaganymi dla czcionki. Jeśli chcesz stworzyć ładny nagłówek, jest to biblioteka, którą możesz spróbować.

FFFFallback

FFFFallback, poręczne narzędzie, które pozwala znaleźć najlepszy stos czcionek, który ulegnie degradacji. Narzędzie ma postać bookmarkletu, który analizuje rodzinę czcionek na stronie i sugeruje zestaw czcionek, które mają być używane jako rezerwowe.

Para czcionek

Czcionka Google jest jedną z najpopularniejszych bibliotek czcionek internetowych używanych przez miliony i obsługuje ponad 500 rodzin czcionek. Para czcionek to zbiór sparowanych czcionek Google, w którym można znaleźć różne kombinacje rodzin czcionek i łatwo pisać twarze. Font Pair sprawia, że wybieranie parowania czcionek jest nieco mniej przytłaczające.

TypeSettings

TypeSettings to zbiór zestawu reguł CSS do definiowania właściwego skalowania czcionek, rytmu pionowego i czułego stosunku typografii. TypeSettings jest dostępny w Sass i Stylus, co pozwala na elastyczność w dostosowywaniu się do potrzeb projektu poprzez dostosowanie zmiennych.

Wpisz

Wpisz jest prawdopodobnie jednym z najbardziej kompletnych zestawów startowych do konfigurowania typografii. Typuj za pomocą kilku podstawowych stylów typograficznych, które obejmują skalowanie, kolory, mały kapitał, dropcap, wcięcia, dzielenie wyrazów, cytaty blokowe, blok kodu i wiele innych rzeczy.

Czytaj teraz: Prezentacja projektów internetowych z piękną typografią