Zrozumienie typografii 10 przydatnych narzędzi i zasobów

W moim ostatnim artykule na temat Zrozumienia typografii napisałem o tym, co się dzieje w projektowaniu typografii i jak nią manipulować, aby poprawić układ witryny i poprawić wrażenia użytkownika. W tym artykule przedstawiam listę 10 moich ulubionych narzędzi do typografii w sieci.

Mogą one pomóc w tworzeniu siatek HTML i obszarów zawartości, tworzeniu stylów CSS, generowaniu nazw czcionek i wielu innych fajnych rzeczy. Sprawdź niektóre z poniższych linków i daj nam znać swoje myśli w obszarze dyskusji.

Rekomendowane lektury: Zrozumienie typografii: pisanie dla sieci

Matryca czcionek

Ten przewodnik online został opublikowany przez blog projektowy 24ways. Zawiera tabelę matrycową wszystkich standardowych czcionek internetowych, które domyślnie znajdziesz u różnych dostawców oprogramowania. Popularne tytuły to Windows, Mac OS X, Microsoft Office i programy Adobe Creative Suite.

Sprawdź kontrast kolorów

Kontrast kolorów jest często problemem, gdy wychodzisz poza standardowy model czarno-biały. Gdy znajdziesz dopasowanie, czujesz się jak perfekcyjny projekt. Jednak zły wybór kombinacji kolorów wygląda bardzo źle i wpłynie negatywnie na ogólny projekt. To małe narzędzie internetowe może pomóc Ci wybrać zestaw kolorów, które będą pasować do siebie w dowolnym układzie stylu.

HTML-Ipsum

Czy potrzebujesz narzędzia Lorem Ipsum, które może zrobić więcej niż tylko wydrukować tekst? Ten generator HTML online utworzy bloki kodu dla najbardziej popularnych elementów strony. Niektóre przykłady obejmują listy nieuporządkowane, listy definicji, formularze internetowe, tabele i wiele innych rozwiązań.

Typechart

Typechart jest jednym z moich ulubionych narzędzi jako programista CSS. Często staram się dopasować konkretną czcionkę w moim systemie do projektu internetowego, ale nie mam czasu, aby przeglądać całą moją kolekcję. To niesamowite narzędzie pozwala przesiać popularne wybory rodzin czcionek, a nawet pobrać odpowiedni kod CSS!

PX-to-EM.com

Jeśli nie zresetujesz domyślnego rozmiaru tekstu przeglądarki, prawdopodobnie wystąpią problemy z dopasowaniem ems do pikseli. Ta aplikacja w przeglądarce zapewnia zarówno tabelę konwersji, jak i interfejs użytkownika dla px. Jest to na pewno bardzo proste narzędzie, ale oferuje poręczny przewodnik z naprawdę prostą funkcjonalnością - i nie można pokonać darmowego cennika.

Zestaw typów CSS

Nie polecam zbyt długo używania CSS Type Set, ponieważ jest to naprawdę narzędzie dla początkujących. Umożliwia generowanie kodu CSS na podstawie wybranych właściwości czcionki. Choć z początku bardzo przydatna, z czasem staje się kulą, na której można się oprzeć. I nie będziesz w stanie zmotywować się do samodzielnego opanowania właściwości CSS. Ale jeśli chcesz zaoszczędzić czas na projekcie, tego narzędzia nie można przeoczyć.

przerzucanie typowe

Oto jeden naprawdę wyjątkowy przykład biblioteki podglądu czcionek. typowe odwracanie obejmuje garść czcionek, które są rodzime dla systemu operacyjnego. Automatycznie skanuje katalog czcionek, aby znaleźć najbardziej bezpieczne rozwiązania internetowe. Możesz je porównać i łatwo wybierać spośród ulubionych opcji. Jest to kolejny świetny oszczędzacz czasu, który zakładasz i nie myślisz o nim do ostatniej chwili.

Siatka typograficzna

Dużo mówi się o projektowaniu wokół sieci w HTML i CSS. Prawdopodobnie rozumiesz koncepcję działania siatki, a mierzenie strony internetowej w pikselach nie różni się. Ten samouczek gridowy autorstwa CSS-Tricks jest bardziej ukierunkowanym wysiłkiem wprowadzenia podstaw typografii dla ery cyfrowej. To znacznie bardziej zaawansowany temat w dziedzinie projektowania stron internetowych. Ale jeśli masz trochę cierpliwości, polecam przejrzenie szczegółów, aby zobaczyć, jak te właściwości siatki mogą rzeczywiście wpłynąć na układ strony.

Jaka czcionka!

Wszyscy znaleźliśmy logo lub obraz z naprawdę fajną niezidentyfikowaną czcionką. WhatTheFont od kilku lat organizuje obchody w Internecie i nadal jest moim ulubionym. Wybierasz obraz do przesłania, a jego skrypt analizuje tekst w obrazie, aby dopasować do niego podobne czcionki. Aplikacja połączy Cię nawet z zewnętrznymi produktami, w których możesz kupić każdą czcionkę w dogodnym dla Ciebie miejscu.

Kalkulator linii bazowej / wysokości linii

Wreszcie naprawdę potężne narzędzie do generowania wysokości linii i właściwości rytmu. Po prostu wprowadź wartości dla podstawowego rozmiaru czcionki i wysokości linii lub włącz własny niestandardowy kod CSS. Aplikacja wygeneruje podglądy w kilku różnych stylach, abyś mógł zorientować się, jak te właściwości wyglądałyby na twojej własnej stronie internetowej.