Podgląd Odstępów Między Literami
Podglądaj odstępy między literami w px, em lub rem, ustawiając czcionkę, grubość i transformację tekstu, a potem skopiuj gotowy kod CSS. Działa w przeglądarce.
To narzędzie działa w całości w Twojej przeglądarce. Twoje pliki nigdy nie są wysyłane na serwer.
Jak działa podgląd odstępów między literami
- Wpisz tekst podglądu i dostosuj odstęp między literami, rozmiar czcionki, grubość, rodzinę czcionek i transformację tekstu.
- Przełączaj jednostkę odstępu między em, px i rem, dopasowując ją do sposobu, w jaki napisany jest arkusz stylów Twojego projektu.
- Obserwuj, jak podgląd na żywo aktualizuje się podczas przeciągania suwaka odstępu.
- Skopiuj wynikowe deklaracje CSS do swojego arkusza stylów albo kliknij Resetuj, aby zacząć od nowa.
Najczęstsze pytania
Do czego służy letter-spacing?
Do regulowania odstępu między znakami (trackingu), aby poprawić czytelność, wyróżnić nagłówek lub uzyskać konkretny styl typograficzny, na przykład szeroko rozstawione etykiety wielkimi literami.
Jaki jest typowy zakres letter-spacing?
Małe wartości ujemne (jak -0.02em) zagęszczają duży tekst wyświetlacza, a wartości dodatnie (0.05em do 0.2em) są typowe dla etykiet wielkimi literami i odznak. Bardzo szeroki odstęp (0.3em i więcej) stosuje się dla efektu stylistycznego.
Czy grubość czcionki wpływa na wygląd letter-spacing?
Tak - grubsze odmiany mają z natury szersze kształty znaków, więc ta sama wartość letter-spacing może wyglądać ciaśniej lub luźniej w zależności od wybranej grubości i rozmiaru.
Czy mogę skopiować CSS bezpośrednio do mojego projektu?
Tak - wygenerowane deklaracje letter-spacing, font-size, font-weight, font-family i text-transform są gotowe do wklejenia w Twoim arkuszu stylów.
Czy letter-spacing powinien być w px, em czy rem?
em to najczęstszy wybór, ponieważ skaluje się razem z własnym font-size elementu, dzięki czemu tracking pozostaje proporcjonalny przy zmianie rozmiaru tekstu. rem skaluje się z rozmiarem czcionki głównej, co jest przydatne, gdy chcesz spójnego odstępu w różnych rozmiarach. px jest najbardziej przewidywalny, ale wcale się nie skaluje. To narzędzie pozwala podejrzeć i skopiować wszystkie trzy.
Jaki letter-spacing sprawdza się najlepiej dla tekstu wielkimi literami?
Etykiety i przyciski wielkimi literami zwykle czyta się lepiej z nieco szerszym trackingiem (od około 0.05em do 0.15em), aby zrównoważyć ciasne ułożenie wielkich liter. Użyj kontrolki transformacji tekstu, by zobaczyć podgląd wielkimi literami przed wyborem wartości.
Jak wypadamy na tle innych
| Feature | Online Tool Store | Kalkulatory letter-spacing | Narzędzia do konwersji jednostek |
|---|---|---|---|
| Podgląd na żywo z suwakiem | ✓ | ✓ | ✗ |
| Zmiana jednostki em / px / rem z poprawną konwersją | ✓ | ✗ | ✓ |
| Wybór rodziny czcionek w podglądzie na żywo | ✓ | ✗ | ✗ |
| Podgląd transformacji tekstu (wielkie/małe litery/wielka litera na początku) | ✓ | ✗ | ✗ |
| Natychmiast kopiowalny CSS | ✓ | ✓ | ✓ |
Przydatne do ustalenia dokładnej wartości trackingu dla nagłówka lub etykiety przycisku, zanim zapiszesz ją w CSS.