Jak stworzyć responsywną typografię za pomocą CSS

Tworzenie strony internetowej z tak wieloma punktami przerwania może być wyczerpujące. Niezależnie od tego, czy jesteś doświadczonym programistą, czy programistą średniego poziomu, możesz nauczyć się wielu nowych technik CSS.

Ale jak zacząć z responsywną typografią? Oto, jak podjąć kroki, aby dostosować strony internetowe do dowolnego rozmiaru ekranu.

Znaczenie responsywnej typografii

Typografia odgrywa istotną rolę w tworzeniu i projektowaniu stron internetowych, zapewniając czytelność, użyteczność i ogólną estetykę witryny. Każdy chce mieć responsywną stronę internetową. Czy nie byłoby wspaniale, gdyby tekst lub czcionki automatycznie dopasowywały się do różnych rozmiarów ekranu? Inne zalety responsywnej typografii w tworzeniu stron internetowych to:

• Poprawia ogólne wrażenia użytkownika na różnych urządzeniach lub ekranach, zapewniając czytelność i czytelność.
instagram viewer
• Zwiększa dostępność, dostosowując użytkowników z wadami wzroku lub innymi niepełnosprawnościami. Dostosowuje się do różnych preferencji użytkownika, takich jak regulowane rozmiary czcionek.
• Spójna typografia na różnych urządzeniach i rozdzielczościach pomaga zachować tożsamość marki i jedność wizualną.

Oto szablon kodu, który możesz skopiować do edytora kodu przed rozpoczęciem, aby móc postępować zgodnie z omawianymi technikami.

Plik kodu HTML

indeks.html
HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8”>
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0”>
<połączyćrel=„arkusz stylów”href="styl.css">
<tytuł> Responsywna typografia tytuł>
głowa>
<ciało>
<dzklasa="pojemnik">
<h1> Lorem ipsum h1>
<P> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
P>
dz>
ciało>
HTML>

Plik kodu CSS

/*style.css*/
ciało{
wyświetlacz: przewód;
uzasadnij treść: Centrum;
wyrównaj elementy: Centrum;
wysokość: 100vh;
}
.pojemnik{
szerokość: 400piks;
kolor tła: antyczna biel;
wyściółka: 15piks;
pudełko-cień:0 2piks 5piksrgba(0,0,0, 0.1) ;
}
h1{
kolor: gorący róż;
}

Przyjrzyjmy się teraz kilku skutecznym metodom i technikom wdrażania responsywnej typografii przy użyciu CSS

1. Mocowanie

Jest to nowoczesna technika typografii CSS, która pozwala i zapewnia, że ​​rozmiar czcionki elementu pozostaje w określonym zakresie. Funkcja zacisku „Clamp()” przyjmuje trzy parametry: wartość minimalną, wartość idealną i wartość maksymalną. Funkcja zacisku nie ogranicza się do typografii. Może być używany do obrazów, kart, filmów i innych multimediów. Tak to działa.

Clamp (wartość minimalna, wartość idealna, wartość maksymalna):

h1{
rozmiar czcionki: Zacisk(2Rem, 5vw, 3Rem);
}
P{
rozmiar czcionki: Zacisk(1Rem, 3vw, 2Rem);
}

W tym przykładzie rozmiary czcionek nagłówka i akapitu są ustawiane za pomocą funkcji „clamp()”. Dla nagłówka „h1” minimalna wartość jest ustawiona na „2rem”, dzięki czemu rozmiar czcionki nie spadnie poniżej dwukrotności głównego rozmiaru czcionki. Idealną lub preferowaną wartością jest „5vw”, co stanowi 5% szerokości widocznego obszaru, dzięki czemu reaguje na różne rozmiary ekranu. Maksymalna wartość jest ustawiona na „3 rem”, co zapewnia, że ​​rozmiar czcionki nie będzie większy niż trzykrotność głównego rozmiaru czcionki. Odwrotnie do stylizacji akapitu.

Najlepszą praktyką jest użycie szerokości rzutni „vw” lub wartości procentowej „%” jako idealnej wartości, ponieważ umożliwia to proporcjonalne skalowanie właściwości w oparciu o dostępną przestrzeń, dzięki czemu projekt jest bardziej responsywny. Upewnij się, że wiesz której jednostki CSS powinieneś użyć dla twojego scenariusza.

Jest to najczęstsza technika typograficzna stosowana przez programistów. Polega na tworzeniu zapytań o media dla każdego punktu przerwania. Pozwala zastosować określone style w oparciu o różne rozmiary ekranu. Oto ilustracja:

/* Domyślny rozmiar czcionki */
h1{
rozmiar czcionki: 38piks;
}
P{
rozmiar czcionki: 20piks;
}
/* Rozmiar czcionki dla małych ekranów */
@głoska bezdźwięczna (maksymalna szerokość:800 pikseli){
h1{
rozmiar czcionki: 32piks;
}
P{
rozmiar czcionki: 18piks;
}
}
/* Rozmiar czcionki dla mniejszych ekranów */
@głoska bezdźwięczna (maksymalna szerokość:400 pikseli){
h1{
rozmiar czcionki: 28piks;
}
P{
rozmiar czcionki: 15piks;
}
}

W tym przykładzie nagłówek i akapit mają domyślną wartość odpowiednio od „38px” do „20px”. Następnie ustawiane są warunki dla mniejszych rozmiarów ekranu, aby układ był responsywny na telefonach komórkowych. Możesz utworzyć tyle zapytań o media, ile chcesz, w oparciu o projekt i wymaganą responsywność, a także wiele innych triki CSS dotyczące zapytań o media, które powinieneś znać.

3. Właściwości niestandardowe CSS

Znany również jako niestandardowe zmienne CSS, przechowuje wartości, które można ponownie wykorzystać podczas stylizacji. Można go wykorzystać do typografii, aby umożliwić łatwe zarządzanie i dostosowywanie. Oto przykład.

:źródło {
--rozmiar-czcionki-nagłówka: 3Rem;
--rozmiar-czcionki-akapitu: 1.5 rem;
}
h1{
rozmiar czcionki: rozm(--rozmiar-czcionki-nagłówka);
}
P{
rozmiar czcionki: rozm(--rozmiar-czcionki-akapitu);
}
@głoska bezdźwięczna (maksymalna szerokość:800 pikseli){
:źródło {
--rozmiar-czcionki-nagłówka: 2Rem;
--rozmiar-czcionki-akapitu: 0.9rem;
}
}
@głoska bezdźwięczna (maksymalna szerokość:400 pikseli){
:źródło {
--rozmiar-czcionki-nagłówka: 1.5 rem;
--rozmiar-czcionki-akapitu: 0.8rem;
}
}

W tym przykładzie właściwość CSS jest ustawiona na poziomie głównym, co pozwala nam uzyskać do niej globalny dostęp. Parametry --heading-font-size i --paragraph-font-size są opisowymi nazwami odpowiednio nagłówka i akapitu, z wartościami domyślnymi dla obu. Ta technika może być ponownie wykorzystana do różnych zapytań o media, aby zapewnić spójność we wszystkich obszarach.

Najlepsze praktyki dotyczące responsywnej typografii

Powszechną praktyką wśród programistów jest bezpośrednie używanie szerokości rzutni (vw) do wykonywania typografii. Chociaż jest prosty i wydaje się działać, staje się mały na małych ekranach i bardzo duży na dużych ekranach. Dzieje się tak również podczas powiększania i pomniejszania strony. Jeśli możesz, unikaj bezpośredniego używania rzutni w ten sposób;

h1{
rozmiar czcionki: 2vh;
 }

Zawsze testuj i upewnij się, że Twoja typografia jest czytelna na różnych rozmiarach ekranu i zawsze sprawdzaj kompatybilność przeglądarki. Weź pod uwagę czytelność i upewnij się, że rozmiary czcionek nie są za małe ani za duże

Responsywna typografia kluczem do czytelnego projektowania stron internetowych

Responsywna typografia odgrywa kluczową rolę w projektowaniu i tworzeniu stron internetowych. Wdrażając metody i techniki, takie jak zaciskanie, zapytania o media i niestandardowe właściwości CSS, możesz zapewnić skalowalność typografii na różnych rozmiarach ekranów i urządzeniach. Jest tak wiele technik, które należy zbadać, próbując stworzyć responsywność za pomocą CSS - użyj tych technik, aby rozpocząć rozwijanie wiedzy w tej dziedzinie.