Abbinamento di font
Font Pairing
Propone coppie di font per titoli e testo prese dagli stack di sistema, le fa vedere con il tuo testo e ti passa il CSS.
Dieci abbinamenti titolo-testo scelti con cura, ciascuno con la ragione per cui funziona, disegnati dal vivo così ci si possono mettere le proprie parole. Non viene scaricato nulla: l’anteprima usa i font già presenti sulla macchina, e quando un abbinamento ne richiede uno non installato la pagina dichiara che sta approssimando con un ripiego, invece di far giudicare la cosa sbagliata.
10 combinazioni
Anteprima
읽기 쉬운 화면은 글꼴 두 개면 충분합니다
제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.
Uno di questi caratteri potrebbe non essere installato qui, quindi al suo posto va un carattere di sistema della stessa categoria. Quello vero avrà un altro aspetto.
Perché funziona
La più coreana delle combinazioni con titolo sans e testo graziato. Le lettere larghe e il basso contrasto di tratto di Pretendard reggono alla dimensione del titolo, e i tratti più morbidi di Noto Serif stancano meno l’occhio su un testo lungo. Le altezze della x sono vicine, quindi mescolarle nella stessa riga non produce un salto di dimensione.
- Titolo
- Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
- Corpo
- Noto Serif KRfonts.google.com/noto (OFL)
CSS
@font-face. Se ti preoccupa il peso, puoi ridurre il font ai caratteri usati. E per il sistema di dimensioni, il generatore di scale tipografiche ne costruisce uno.Come si usa
Impostare prima la lingua dell’anteprima
Un abbinamento che funziona in alfabeto latino può crollare in hangul, perché i due sistemi di scrittura non condividono né le proporzioni né le abitudini di linea di base. Se il prodotto è coreano, va guardato in coreano. Il filtro «solo coreano» restringe l’elenco agli abbinamenti in cui entrambi i caratteri coprono davvero l’hangul.
Inserire il proprio titolo e il proprio testo
Le frasi di esempio sono generiche di proposito. Il titolo reale è di solito più corto e ha lettere diverse, e tutte e due le cose cambiano il modo in cui un abbinamento si legge.
Leggere la motivazione, non solo l’immagine
Ogni abbinamento dice che cosa lo tiene insieme: uno scheletro condiviso con un contrasto di peso, oppure uno scontro deliberato di categorie. È quella la parte che si trasferisce a un abbinamento inventato da sé.
Prendere il CSS e poi andare a procurarsi i font
Il CSS dà le famiglie, il peso del titolo, la spaziatura fra le lettere e l’interlinea del testo. I font veri e propri si prendono dalla fonte indicata sotto ogni abbinamento e hanno bisogno di un `@font-face` scritto a parte.
Domande frequenti
Perché l’anteprima dice che è approssimativa?
Perché quell’abbinamento nomina un font che la macchina non ha, e non viene scaricato alcun webfont: la pagina ripiega su un carattere di sistema della stessa categoria. Le proporzioni sono all’incirca giuste e la personalità no. Conviene installare il font, oppure giudicare dal saggio sulla pagina della fonderia prima di impegnarsi.
Perché non caricare semplicemente i webfont?
Caricarli significherebbe una richiesta a una CDN di font per ogni persona che visita questa pagina, cioè una superficie di tracciamento aggiunta a una pagina che non ne ha, e per una semplice anteprima. Il compromesso è deliberato: meno anteprime fedeli, nessuna terza parte nella richiesta.
Esiste un abbinamento «corretto»?
No. Questi sono dieci abbinamenti che stanno in piedi per ragioni dichiarate, il che è diverso da dieci abbinamenti giusti per un prodotto specifico. La risposta reale più frequente è una sola famiglia in due pesi: non è mancanza di coraggio, è ciò di cui la maggior parte delle interfacce ha bisogno.
Un font coreano appesantisce molto la pagina. Che si fa?
Se ne fa un subset. Un font hangul completo porta 11.172 sillabe ed è di solito di parecchi megabyte; ridurlo all’insieme KS X 1001 di 2.350 copre ben oltre il 99% del testo coreano di tutti i giorni e toglie gran parte del peso. Lo strumento di subsetting di questo sito lo fa nel browser.
Può ricevere da
Generatore di scale tipografiche
Type Scale Generator
Costruisce da una dimensione di base e da un rapporto una scala modulare di corpi e spaziature, esportabile come CSS o come token.
Ispettore di font
Font Inspector
Apre un file di font e mostra la copertura dei glifi blocco per blocco, il numero di sillabe hangul, i pesi, gli assi variabili, il permesso di incorporamento e i record di licenza.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Ispettore di font
Font Inspector
Apre un file di font e mostra la copertura dei glifi blocco per blocco, il numero di sillabe hangul, i pesi, gli assi variabili, il permesso di incorporamento e i record di licenza.
Ridurre un font ai caratteri usati
Font Subsetter
Taglia un font TrueType lasciando solo i glifi che il tuo testo usa davvero e può impacchettare il risultato in WOFF: è la differenza fra un webfont da 4 MB e uno da 90 KB.
Generatore di scale tipografiche
Type Scale Generator
Costruisce da una dimensione di base e da un rapporto una scala modulare di corpi e spaziature, esportabile come CSS o come token.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Calcolatrice delle proporzioni
Aspect Ratio Calculator
Ricava il lato mancante per una proporzione data ed elenca i formati standard che le corrispondono.
Togliere lo sfondo
Background Remover
Elimina uno sfondo piatto o di un colore solo lavorando in OKLab e restituisce un PNG trasparente, con un pennello per rifinire i bordi.