Combinador de tipografies
Prova combinacions de tipografies per a títols i text amb 20 fonts de llicència oberta, ajusta la mida i l'interlineat i copia les piles CSS font-family.
Parelles suggerides
Previsualització
Instal·la els paquets npm i importa només els gruixos que facis servir. Les tipografies es serveixen aleshores des del teu propi lloc, sense cap CDN de tipografies.
Com utilitzar el combinador de tipografies
- Comença per una de les Parelles suggerides (Editorial, Bloc modern, Pàgina d’aterratge, Notícies, Elegant, Revista tecnològica, Llibre, Clàssic, Documentació, Divertit). Cada botó mostra la tipografia del títol i la del text que aplica.
- O bé tria la teva Tipografia del títol i la teva Tipografia del text. Les llistes estan agrupades en tipografies de pal sec (sans-serif), amb serif, display, monoespaiades i manuscrites. Intercanvia les tipografies canvia l’una per l’altra.
- Ajusta la Mida del títol, la Mida del text i l’Interlineat, i tria el Gruix del títol (Negreta (700) o Normal (400)). Marca Fons fosc per comprovar la parella en mode fosc.
- Substitueix el Text del títol i el Text del cos per les teves paraules: un títol real i un paràgraf real t’expliquen molt més que un pangrama. Deixa una línia buida entre paràgrafs.
- Copia el Codi CSS i segueix Allotjament propi amb Fontsource per afegir les tipografies al teu projecte.
Les tipografies es carreguen la primera vegada que les tries (uns 12 a 50 KB per gruix). Es serveixen des d’aquest lloc, mai des d’un CDN de tipografies.
Què fa bona una combinació de tipografies
- Contrast, no conflicte. La recepta clàssica és una serif per a un paper i una sans-serif per a l’altre: Playfair Display sobre Lato, o Montserrat sobre Merriweather. Dues tipografies que s’assemblen però no són idèntiques (dues sans-serif geomètriques, per exemple) sovint semblen un error.
- Una tipografia de text serena. El text és on la gent passa el temps. Tria una tipografia de formes obertes i amb una alçada de x generosa (Inter, Lato, Open Sans, Source Serif 4, Merriweather) i reserva les tipografies display, com Playfair Display, DM Serif Display, Oswald o Caveat, per a títols curts.
- Proporcions coherents. Les tipografies amb alçades de x semblants queden bé juntes a la mateixa línia i a la mateixa columna.
- Dues tipografies són suficients. Crea jerarquia amb la mida, el gruix i l’espaiat en lloc d’una tercera tipografia.
Per a un text llegible, de 16 a 20 px amb un interlineat entre 1,4 i 1,7 és un bon interval de partida, amb uns 60 a 75 caràcters per línia. Els títols solen necessitar un interlineat més ajustat (1,1 a 1,3), que el codi CSS ja defineix.
El codi CSS
El codi declara dues propietats personalitzades, --font-heading i --font-body, cadascuna amb una pila de reserva: si la tipografia web encara no s’ha carregat, el navegador mostra una tipografia del sistema semblant (Georgia per a les serif, la tipografia d’interfície del sistema per a les sans-serif). Les mides s’escriuen en rem (16 px = 1rem), de manera que segueixen el paràmetre de mida de lletra del navegador del lector.
Allotjament propi i llicències
Les 20 tipografies provenen de Fontsource, que empaqueta tipografies de codi obert per a npm. El quadre d’instal·lació dona l’ordre npm install i les línies import del subconjunt llatí i només dels gruixos que facis servir; el teu empaquetador copia després els fitxers woff2 a la compilació. Servir les tipografies des del teu propi domini és més ràpid (cap connexió addicional), funciona sense connexió i evita enviar les adreces IP dels teus visitants a un servei de tipografies de tercers, un problema conegut amb el RGPD a la UE.
Totes les tipografies d’aquí tenen la SIL Open Font License 1.1, segons les metadades del seu paquet: pots utilitzar-les en llocs web, aplicacions i impresos, amb finalitats comercials o no, i incrustar-les. No pots vendre els fitxers de la tipografia per separat. Si modifiques una tipografia, ha de conservar l’OFL i no pot fer servir el nom reservat original. El fitxer de llicència s’inclou a cada paquet.
Preguntes freqüents
Aquesta eina fa servir Google Fonts?
No. Moltes d’aquestes famílies també són a Google Fonts, però aquí els fitxers provenen dels paquets npm de Fontsource i els serveix aquest lloc. No es fa cap petició a Google ni a cap altre CDN de tipografies.
Per què alguns títols no es posen més negres?
DM Serif Display només existeix en un gruix normal. L’eina la mostra aleshores en 400, ho indica sota els controls, i el codi CSS fa servir 400.
Puc combinar dues serif o dues sans-serif?
Sí, si es diferencien clarament pel paper i el gruix, per exemple un títol condensat en negreta amb una tipografia de text lleugera i oberta. L’eina mostra una nota quan les dues tipografies comparteixen estil, perquè el contrast entre una serif i una sans-serif és més fàcil d’encertar.
Quins caràcters s'hi inclouen?
La previsualització carrega el subconjunt llatí (anglès, francès i la majoria de les llengües d’Europa occidental, amb accents, œ, « » i el signe de l’euro), que cobreix el català, incloses la ç, les vocals accentuades i la ela geminada (l·l). Quan la tipografia els té i el teu text ho necessita, també carrega els subconjunts llatí ampliat (lletres d’Europa central com č, ł, ő, ț), ciríl·lic i grec. Les tipografies sense un subconjunt mostren aquestes lletres amb la tipografia de reserva: Lato, Work Sans o Space Grotesk no tenen ciríl·lic, i només Inter, Roboto, Open Sans, Source Serif 4 i Fira Code tenen grec. Cap de les 20 tipografies té lletres àrabs.
Puc utilitzar aquestes tipografies en un projecte comercial?
Sí. La SIL Open Font License permet l’ús comercial sense pagament ni atribució en el teu disseny. Només no es permet revendre per separat els fitxers de la tipografia.
Eines relacionades
- Convertidor de px a rem Converteix px a rem i em amb qualsevol mida de lletra arrel, crea una taula de conversió en bloc i passa tots els valors en px d'un CSS a rem d'un clic.
- Generador de paletes de colors Genera paletes de colors a partir d'un color base amb regles d'harmonia: complementària, anàloga, triàdica, tetràdica, quadrada i monocromàtica.
- Comprovador de contrast de colors Comprovador de contrast WCAG gratuït. Posa un color de text i de fons i obtén la relació de contrast, els resultats AA/AAA i el color més proper que compleix.
- Generador de degradats CSS Crea degradats CSS lineals, radials i cònics amb previsualització en directe. Afegeix parades de color, ajusta l'angle i copia el codi CSS amb un clic.