Come creare una tipografia reattiva con i CSS

Sviluppare un sito Web con così tanti punti di interruzione può essere estenuante. Ci sono molte nuove tecniche da apprendere nei CSS, che tu sia uno sviluppatore esperto o uno sviluppatore di medio livello.

Ma come si inizia con la tipografia reattiva? Ecco come adottare misure per adattare le pagine Web a qualsiasi dimensione dello schermo.

Importanza della tipografia reattiva

La tipografia svolge un ruolo fondamentale nello sviluppo e nel design web garantendo la leggibilità, l'usabilità e l'estetica complessiva di un sito web. Tutti vogliono un sito Web reattivo. Non sarebbe fantastico se il testo o i caratteri si adattassero automaticamente alle diverse dimensioni dello schermo? Altri vantaggi della tipografia reattiva nello sviluppo web includono quanto segue;

• Migliora l'esperienza complessiva dell'utente su vari dispositivi o dimensioni dello schermo garantendo leggibilità e leggibilità.
instagram viewer
• Aumenta l'accessibilità accogliendo gli utenti con disabilità visive o altre disabilità. Accoglie varie preferenze dell'utente, come le dimensioni dei caratteri regolabili.
• Una tipografia coerente su dispositivi e risoluzioni aiuta a preservare l'identità del marchio e l'unità visiva.

Ecco un modello di codice che puoi copiare nel tuo editor di codice prima di iniziare, in modo da poter seguire le tecniche da discutere.

Il file di codice HTML

indice.html
html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8">
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<collegamentorel="foglio di stile"href="stile.css">
<titolo> Tipografia reattiva titolo>
Testa>
<corpo>
<divclasse="contenitore">
<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>
div>
corpo>
html>

Il file di codice CSS

/*style.css*/
corpo{
Schermo: flettere;
giustificare il contenuto: centro;
align-elementi: centro;
altezza: 100vh;
}
.contenitore{
larghezza: 400px;
colore di sfondo: bianco antico;
imbottitura: 15px;
scatola-ombra:0 2px 5pxrgb(0,0,0, 0.1) ;
}
h1{
colore: rosa caldo;
}

Ora esploriamo alcuni metodi e tecniche efficaci per implementare la tipografia reattiva utilizzando i CSS

1. Serraggio

Questa è una moderna tecnica di tipografia CSS che consente e garantisce che la dimensione del carattere di un elemento rimanga entro un certo intervallo. La funzione clamp "Clamp ()" accetta tre parametri, il valore minimo, il valore ideale e il valore massimo. La funzione del morsetto non è limitata alla tipografia. Può essere utilizzato per immagini, schede, video e altri media. Ecco come funziona.

Morsetto (valore minimo, valore ideale, valore massimo):

h1{
dimensione del font: MORSETTO(2rem, 5vw, 3rem);
}
P{
dimensione del font: MORSETTO(1rem, 3vw, 2rem);
}

In questo esempio, le dimensioni dei caratteri per l'intestazione e il paragrafo vengono impostate utilizzando la funzione "clamp()". Per l'intestazione "h1" il valore minimo è impostato su "2rem" assicurando che la dimensione del carattere non scenda al di sotto del doppio della dimensione del carattere principale. Il valore ideale o preferito è impostato su "5vw", ovvero il 5% della larghezza del viewport, che lo rende reattivo alle diverse dimensioni dello schermo. Il valore massimo è impostato su "3 rem" assicurando che la dimensione del carattere non sia più grande di tre volte la dimensione del carattere principale. Viceversa per lo stile del paragrafo.

È consigliabile utilizzare la larghezza del viewport "vw" o la percentuale "%" come valore ideale, in quanto consente alla proprietà di ridimensionarsi proporzionalmente in base allo spazio disponibile, rendendo il design più reattivo. Assicurati di saperlo quale unità CSS dovresti usare per il tuo scenario

Questa è la tecnica tipografica più comune utilizzata dagli sviluppatori. Implica la creazione di query multimediali per ogni punto di interruzione. Ti consente di applicare stili specifici in base a diverse dimensioni dello schermo. Ecco un'illustrazione:

/* Dimensione carattere predefinita */
h1{
dimensione del font: 38px;
}
P{
dimensione del font: 20px;
}
/* Dimensione carattere per schermi piccoli */
@media (larghezza massima:800 pixel){
h1{
dimensione del font: 32px;
}
P{
dimensione del font: 18px;
}
}
/* Dimensione carattere per schermi più piccoli */
@media (larghezza massima:400 pixel){
h1{
dimensione del font: 28px;
}
P{
dimensione del font: 15px;
}
}

In questo esempio, l'intestazione e il paragrafo sono impostati su un valore predefinito rispettivamente da "38px" a "20px". Quindi, vengono impostate le condizioni per dimensioni dello schermo più piccole per rendere il layout reattivo sui telefoni cellulari. Puoi creare tutte le query multimediali che desideri in base al design e alla reattività che desideri, tra molti altri Trucchi CSS per media query che dovresti conoscere.

3. Proprietà personalizzate CSS

Conosciuto anche come variabili personalizzate CSS, memorizza valori che possono essere riutilizzati durante lo stile. Può essere utilizzato per la tipografia per consentire una facile gestione e personalizzazione. Ecco un esempio.

:radice {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rim;
}
h1{
dimensione del font: var(--heading-font-size);
}
P{
dimensione del font: var(--paragraph-font-size);
}
@media (larghezza massima:800 pixel){
:radice {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rim;
}
}
@media (larghezza massima:400 pixel){
:radice {
--heading-font-size: 1.5rim;
--paragraph-font-size: 0.8rim;
}
}

In questo esempio, la proprietà CSS è impostata a livello di root, il che ci consente di accedervi a livello globale. --heading-font-size e --paragraph-font-size sono nomi descrittivi rispettivamente per l'intestazione e il paragrafo, con valori predefiniti assegnati a entrambi. Questa tecnica può essere riutilizzata per varie query multimediali per garantire la coerenza su tutta la linea.

Best practice per la tipografia reattiva

È prassi comune tra gli sviluppatori utilizzare direttamente la larghezza del viewport (vw) per eseguire la tipografia. Sebbene sia semplice e sembri funzionare, diventa minuscolo su schermi di piccole dimensioni ed estremamente grande su schermi di grandi dimensioni. Ciò si verifica anche quando ingrandisci e rimpicciolisci la pagina. Se puoi, evita di utilizzare il viewport direttamente in questo modo;

h1{
dimensione del font: 2vh;
 }

Testa sempre e assicurati che la tua tipografia sia leggibile su schermi di varie dimensioni e verifica sempre la compatibilità del browser. Considera la leggibilità e assicurati che le dimensioni dei caratteri non siano troppo piccole o troppo grandi

La tipografia reattiva è la chiave del web design leggibile

La tipografia reattiva gioca un ruolo fondamentale nel web design e nello sviluppo. Implementando metodi e tecniche come il clamping, le media query e le proprietà personalizzate CSS, puoi assicurarti che la tua tipografia si ridimensioni su schermi e dispositivi di varie dimensioni. Ci sono così tante tecniche da esplorare quando si tenta di creare reattività utilizzando i CSS: utilizzare queste tecniche per iniziare a sviluppare competenze in quest'area.