Sposób na uporządkowany i spójny wygląd strony
Strony stworzone przez AI często wyglądają niedbale przez losowe odstępy, na przykład 13 pikseli w jednej sekcji i 27 w innej. Jednolita skala rozwiązuje ten problem, opierając każdy odstęp i rozmiar tekstu na stałych wartościach. Wybierasz jednostkę bazową 4 lub 8 pikseli, bazowy rozmiar tekstu od 16 do 18 oraz jeden z trzech mnożników: 1.2, 1.25 lub 1.333. Otrzymujesz dziesięć stopni odstępów i osiem rozmiarów tekstu, od przypisów po główny nagłówek, a każdy stopień jest wizualnie zaprezentowany. Gotowy kod to blok :root ze zmiennymi CSS w jednostkach rem, a wszystkie obliczenia odbywają się w przeglądarce.
To standardowa jednostka w nowoczesnych systemach projektowania. Wszystkie odstępy są jej wielokrotnościami, co tworzy poczucie porządku.
To stosunek jednego rozmiaru tekstu do następnego. Wyższy mnożnik tworzy bardziej wyraźny kontrast między nagłówkami a zwykłym tekstem.
Jednostka rem zależy od rozmiaru czcionki ustawionego w przeglądarce użytkownika. Osoby powiększające tekst ze względów dostępności zobaczą całą stronę powiększoną w tych samych proporcjach, co nie zadziałałoby przy pikselach. Przelicznik wynosi 16 pikseli na jeden rem.
Wklejasz blok zmiennych i wyraźnie zaznaczasz, że każdy odstęp i rozmiar tekstu musi z nich korzystać. Bez tego polecenia AI nadal będzie wymyślać losowe wartości.
Wartość 1.25 pasuje do większości stron. Mnożnik 1.2 jest lepszy przy dużej ilości ciągłego tekstu, a 1.333 sprawdzi się na landing page z dużymi nagłówkami. Przy bazie 16 główny nagłówek będzie miał 49 pikseli dla mnożnika 1.25 oraz 67 pikseli dla 1.333.
Nie udało się wczytać Klix
Najpierw spróbuj odświeżyć stronę. Jeśli właśnie pojawiła się nowa wersja, odświeżenie od razu pomaga.
Jeśli odświeżenie nie pomogło, Twoja przeglądarka może być zbyt stara. Klix uruchamia narzędzia na Twoim urządzeniu, a nie na serwerze, więc potrzebuje przeglądarki z 2022 roku lub nowszej. Co zrobić: zaktualizuj Chrome lub Firefox i otwórz ponownie klixtools.com.