Tamanho do texto e da fonte, qual a diferença?

Oi, Igor! Como vai?

No CSS, a propriedade font-size define o tamanho que o texto vai aparecer na tela, independentemente do tamanho original da fonte que você importou.

Assim:

p {
  font-family: 'Arial';
  font-size: 36px; /* tamanho final exibido */
}

Se a fonte foi desenhada, por exemplo, para ter 400px no arquivo original, mas você define font-size: 36px, o navegador vai reduzir proporcionalmente para caber nesse tamanho.

Já se a fonte for menor no desenho original e você colocar um valor maior, como font-size: 100px, ela será ampliada, mas pode perder qualidade se não for uma fonte vetorial (a maioria das fontes modernas é vetorial, então não há perda visível).

Então:

• font-size controla o tamanho final exibido.
• Tamanho original da fonte influencia apenas na proporção e detalhe, mas o navegador ajusta de acordo com o font-size.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Muito obrigado pela explicação, não sabia disso e nem que existia fontes vetoriais.