“Números enormes”, nova seção no site

[rghedin]

Faz um tempão que quero implementar isso no site. Não sei como (minhas ideias/tentativas se mostraram falhas), daí pensei em abrir aqui.

A ideia é ter uma seção/leiaute, atrelado a uma tag ou categoria, para Números Enormes: um numerozão seguido de uma pequena explicação do contexto. Parecido com os posts de citações (exemplo), só que com o número em vez da frase.

O problema é tornar o numerozão responsivo, ou seja, que fique grande em todas os tamanhos de tela, mas sem quebrar a linha.

• O numerozão pode ser a primeira linha do post. É importante manter o título descritivo e, na saída, oculto (display: none; mesmo esquema das notinhas/post format aside).
• Em telas pequenas, o numerozão ocuparia 100% da largura da tela; nas grandes, ~50%.

Um mockup:

[claromes]

Faça testes com clamp() no css. Você pode criar uma classe chamada ctx-number para inserir o estilo.

Ficaria assim:

No código:

.ctx-number {
    font-size: clamp(2rem, 12vw, 5rem);
    white-space: nowrap;
}

<span class="ctx-number">US$ 20 bilhões</span>