Combinação de fontes
Font Pairing
Sugere pares de fonte para título e texto a partir de pilhas de fontes do sistema, com prévia usando seu próprio texto em coreano e inglês, e entrega o CSS.
Dez combinações curadas de título e corpo, cada uma com o motivo pelo qual funciona, desenhadas ao vivo para que você ponha as suas próprias palavras nelas. Nada é buscado: a prévia usa fontes já presentes na máquina, e quando uma combinação pede uma que não está instalada, a página diz que ela está sendo aproximada por uma fonte substituta em vez de deixar você julgar a coisa errada.
10 duplas
Prévia
읽기 쉬운 화면은 글꼴 두 개면 충분합니다
제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.
Pode ser que uma destas fontes não esteja instalada aqui, então uma fonte do sistema da mesma categoria entra no lugar. A de verdade vai parecer diferente.
Por que funciona
A mais coreana das combinações de título sans sobre corpo serifado. As letras largas e o baixo contraste de traço da Pretendard se seguram no tamanho de título, e os traços mais macios da Noto Serif cansam menos a vista num texto longo. As alturas de x são próximas, então misturar as duas na mesma linha não gera salto de tamanho.
- Título
- Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
- Corpo
- Noto Serif KRfonts.google.com/noto (OFL)
CSS
@font-face. Se o tamanho preocupa, o subconjunto de fonte corta o excesso. E para o sistema de tamanhos, o gerador de escala tipográfica monta um.Como usar
Defina primeiro o idioma da prévia
Uma combinação que funciona em latino pode desmoronar em hangul, porque as duas escritas não compartilham proporções nem um hábito de linha de base. Se o produto é coreano, olhe-o em coreano. O filtro “só coreano” restringe a lista às combinações em que as duas fontes de fato cobrem hangul.
Insira o seu próprio título e corpo
As frases de amostra são genéricas de propósito. O seu título real normalmente é mais curto e tem letras diferentes, e as duas coisas mudam como uma combinação se lê.
Leia a justificativa, não só a figura
Cada combinação diz o que a mantém coesa — um esqueleto compartilhado com um contraste de peso, ou um choque deliberado de categorias. Essa é a parte que se transfere para uma combinação que você mesmo inventar.
Pegue o CSS, depois vá buscar as fontes
O CSS dá as famílias, o peso do título, o tracking e a altura de linha do corpo. As fontes em si vêm da origem nomeada sob cada combinação, e precisam de um `@font-face` seu.
Perguntas frequentes
Por que a prévia diz que é aproximada?
Porque aquela combinação nomeia uma fonte que a sua máquina não tem, e nenhuma web font está sendo baixada — a página recua para uma fonte do sistema na mesma categoria. As proporções estão mais ou menos certas e a personalidade não está. Instale a fonte, ou julgue pelo espécime na página da própria fundição antes de se comprometer.
Por que não simplesmente carregar as web fonts?
Carregá-las significaria uma requisição a uma CDN de fontes para cada visitante desta página, que é uma superfície de rastreamento acrescentada a uma página que não tem nenhuma, por causa de uma prévia. A troca é deliberada: menos prévias precisas, nenhum terceiro na requisição.
Existe uma combinação “correta”?
Não. Estas são dez que se sustentam por motivos declarados, o que é diferente de dez que são certas para o seu produto. A resposta real mais comum é uma família em dois pesos — isso não é falta de coragem, é o que a maioria das interfaces precisa.
Uma fonte coreana deixa a página muito mais pesada. O que eu faço?
Reduza-a a um subconjunto. Uma fonte hangul completa carrega 11.172 sílabas e normalmente tem vários megabytes; cortá-la ao conjunto KS X 1001 de 2.350 cobre bem mais de 99% do texto coreano cotidiano e remove a maior parte do peso. A ferramenta de subconjunto de fonte deste site faz isso no navegador.
Pode receber de
Gerador de escala tipográfica
Type Scale Generator
Monta uma escala modular de tipos e espaçamentos a partir de um tamanho base e uma razão, exportada como CSS ou tokens.
Inspetor de fontes
Font Inspector
Abre um arquivo de fonte para mostrar a cobertura de glifos por bloco, a contagem de sílabas coreanas, o peso, os eixos variáveis, a permissão de incorporação e os registros de nome da licença.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Inspetor de fontes
Font Inspector
Abre um arquivo de fonte para mostrar a cobertura de glifos por bloco, a contagem de sílabas coreanas, o peso, os eixos variáveis, a permissão de incorporação e os registros de nome da licença.
Subconjunto de fonte
Font Subsetter
Reduz uma fonte TrueType aos glifos que seu texto realmente usa e pode empacotar o resultado como WOFF — a diferença entre uma webfont coreana de 4 MB e uma de 90 KB.
Gerador de escala tipográfica
Type Scale Generator
Monta uma escala modular de tipos e espaçamentos a partir de um tamanho base e uma razão, exportada como CSS ou tokens.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Calculadora de proporção
Aspect Ratio Calculator
Calcula a dimensão que falta para uma proporção alvo e lista os tamanhos padrão que ela corresponde.
Remover fundo de imagem
Background Remover
Recorta um fundo liso ou de cor única em OKLab e devolve um PNG transparente, com um pincel para corrigir as bordas.