Interaktywna skala typograficzna
Podgląd modułowej skali typograficznej z regulowaną wielkością bazową, stosunkiem, czcionką i wysokością linii. Eksport CSS Rozmiary dla tekstu ciała i sześć poziomów pozycji.
Typografia CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Tekst eksportu pozostaje po angielsku; wpisane dane nie są zmieniane.
Nie ma rejestracji. Żadnych kredytów na sztuczną inteligencję. Narzędzie to przypomina wyjście w przeglądarce.
Od pomysłu do czegoś pożytecznego.
- 01
Wybierz czcionkę, rozmiar bazowy i modułowy stosunek.
- 02
Sprawdzić rozmiar nagłówka i odstępy między akapitami.
- 03
Pobieranie CSS zmienne dla bieżącej skali.
Trochę kontekstu.
Modułowa skala mnoży rozmiar czcionki bazowej przez powtarzający się stosunek. Ten plac zabaw oblicza sześciopoziomową hierarchię nagłówków plus ciało i mały tekst. Rozmiary są jednoznaczne wartości pikseli dla punktu wyjścia; przegląd reakcji zachowania i zoom przed użyciem ich w produkcji.
Dobre pytania.
Czy CSS wczytać wybraną czcionkę?
Nie. Nazwy i nazwy fontów i dostaw rodzin awaryjnych. Wczytaj lub samohostuj wybraną czcionkę w aplikacji.
Czy te rozmiary reagują?
Eksport zawiera stałe rozmiary. Dostosuj je do wartości granicznych lub układu typu płynu po przetestowaniu rzeczywistej zawartości.