15 Narzędzia online do typografii Wszyscy projektanci powinni wiedzieć
Typografia jest podstawą każdego projektu, ponieważ czytanie jest jedną z najbardziej podstawowych rzeczy, które robimy w sieci. Wybrana typografia ma wpływ na wiele aspektów witryny, w tym czytelność, nastrój i ogólne wrażenia użytkownika. To bardzo ważne dla projektantów i programistów znać podstawowe zasady typografii do stworzyć czytelne, przyjemne wzory.
Mówiliśmy już o narzędziach do parowania czcionek, a dziś będziemy dzielić się z wami narzędziami do pisania, dzięki którym można uzyskać lepsze wrażenia z czytania na stronach, które budujesz i / lub projektujesz.
Oto wtyczki, narzędzia online i skrypty, które pomogą ci tworzyć niesamowite nagłówki i czysty czytelny tekst.
Wpisz
Nie spowoduje to wyboru projektu, ale określi odpowiedni znacznik za pomocą stylizacji dla typowych szablonów typograficznych. Może również dać wskazówki, jak prawidłowo stylować kopię tekstu.
Sprawdzić: Demo | Dokumentacja
Gutenberg
Gutenberg to elastyczny i łatwy w użyciu zestaw startowy typografii dla programistów i projektantów. Pomoże Ci ustawić rozmiar typu bazowego, wysokość linii i maksymalną szerokość. Gutenberg jest projektem open-source, więc zachęcamy do jego wkładu, adaptacji i modyfikacji.
Sprawdzić: Demo | Dokumentacja
Lettering.js
Lettering.js to wtyczka jQuery, która zapewnia kontrolę nad typem kerningu. Pozwala łatwo uzyskać projekt redakcyjny i zarządzać kodem. Na stronie znajdują się niesamowite przykłady typografii wykonane za pomocą tej wtyczki do inspiracji.
Sprawdzić: Demo | Dokumentacja
Typebase.css
Typebase.css to konfigurowalny arkusz stylografii. Zawiera zarówno saas, jak i mniej wersji i jest łatwo modyfikowany do nowoczesnych projektów internetowych.
Sprawdzić: Demo | Dokumentacja
FitText
FitText to wtyczka, która sprawi, że rozmiary czcionek witryny będą elastyczne. Pomoże Ci osiągnąć skalowalne nagłówki dla różnych rozdzielczości ekranu; innymi słowy, spraw, by twoja typografia reagowała. Jest przeznaczony do wyświetlania tylko dużego tekstu.
Sprawdzić: Demo | Dokumentacja
Kerning.js
Kerning.js pomaga automatycznie przekształcać, skalować i modyfikować typografię za pomocą CSS. Rozpoczęcie pracy z Kerning.js jest łatwe.
Sprawdzić: Demo | Dokumentacja
Typesettings.css
Typesettings.css to Twój plac zabaw do tworzenia minimalistycznych projektów internetowych lub blogów. Wszystkie użyte tutaj style typografii są inspirowane podstawami projektowania graficznego.
Sprawdzić: Demo | Dokumentacja
Plecak
Dzięki Plecakowi możesz stworzyć niesamowitą typografię płynów dzięki nowej, responsywnej właściwości rozmiaru czcionki. Tworzenie responsywnej typografii jest wyjątkowo łatwe.
Sprawdzić: Demo | Dokumentacja
FlowType.JS
Najbardziej czytelna typografia zawiera od 45 do 75 znaków w wierszu, ale znalezienie tej równowagi stanowi wyzwanie dla programistów. FlowType.JS zmienia rozmiar czcionki, a następnie wysokość linii na podstawie określonej szerokości elementu.
Sprawdzić: Demo | Dokumentacja
Blast.js
Blast.js pomoże Ci rozdzielić teksty, aby ułatwić manipulowanie typografią. Zawiera 4 wbudowane ograniczniki: znak, słowo, zdanie i element. Może również dopasowywać niestandardowe wyrażenia i wyrażenia.
Sprawdzić: Demo | Dokumentacja
slabText
slabText to prosty skrypt, który dzieli nagłówki na wiersze, aby idealnie wypełnić dostępną przestrzeń poziomą. Skrypt oblicza idealną liczbę znaków do ustawienia w każdym wierszu, dzieląc dostępną szerokość czcionki według piksela.
Sprawdzić: Demo | Dokumentacja
Skala typu
Za pomocą Skali typów możesz wyświetlić podgląd i wybrać odpowiednią skalę dla swojego projektu. Nie ma reguł - po prostu baw się czcionką, skalą i różnymi czcionkami internetowymi.
Sprawdzić: Demo | Dokumentacja
Typograficzny
Typograficzny pomaga reagować na typografię. Wszystko, co musisz zrobić, to po prostu wybrać kilka czcionek, ustawić kilka ustawień, a otrzymasz ładną responsywną typografię.
Sprawdzić: Demo | Dokumentacja
Typi
Typi to mieszanka Saas, której możesz użyć, aby łatwo reagować na typografię. Tworzy rozmiar czcionki i wysokość linii dla HTML i innych elementów. Ponadto Typi ma pionową funkcję rytmu do obliczania wysokości linii.
Sprawdzić: Dokumentacja
Lining.js
Dzięki wtyczce Lining.js uzyskasz pełną kontrolę nad typografią internetową. Jest obsługiwany przez większość popularnych przeglądarek, takich jak Safari, Google Chrome, Opera i Mozilla Firefox.
Sprawdzić: Demo | Dokumentacja
Bonus: 2 dodatkowe narzędzia!
Stan typu sieci
Stan typu sieci Web to strona internetowa, która oferuje aktualne dane dotyczące obsługi typu i funkcji w Internecie. Możesz użyć wyszukiwania lub kategorii, takich jak kerning, odstępy między wierszami, ładowanie czcionek CSS i wiele innych, aby znaleźć dokładnie to, czego potrzebujesz.
Typograf
Typograph jest niesamowitą wtyczką do sieci i szkicu, która umożliwia umieszczanie spacji po jednoliterowych słowach, podłączenie liczby i jednostki. Usuwa również podwójne spacje, wprowadza, kropki i inne literówki, dzięki czemu można uzyskać czystą, piękną typografię, która jest łatwa do odczytania.
Sprawdzić: Dokumentacja
