Como é um elemento inline
vc pode usar vertical-align: super
Ficaria como na imagem abaixo.

Abaixo falo mais sobre top/superior
Segue código da imagem
<h3 style="font-size:40px; font-color: #000;">
<span>CVS<span style="font-size:24px; vertical-align: super">®</span> - </span>
</h3>
Over Explain
Repare que todo texto cria uma "caixa de texto" onde o conteúdo fica dentro.

Essa caixa de texto
é defina pela descender line
e ascending line
e pode variar de font-family
para font-family
, pois ela é intrínseca ao arquivo da fonte (.ttf
ou .otf
).

Apesar disso não existe uma regra tipográfica, e nem da W3C, que diga que vc tem que alinha o ®
no top
ou no super
Veja como fica alinhando o ®
a 100%
do vertical-align
, ele "cola" no topo da caixa de texto
, e não no "topo do texto"

Veja como entre duas famílias tipográficas vc pode ter uma "anatomia" diferente. Aqui temos a Time New Roman
e a Verdana
, as duas com o mesmo tamanho 20pt
, mas visualmente elas tem tamanho diferente, isso foi definido pelo designe da font e é algo referente ao arquivo em si...

Aqui tem um artigo mais relacionado a tipografica, mas tem MUITA coisa interessante sobre a história da tipografia, e pq o Figma resolver mudar o seu entendimento do line-height
e como ele é renderizado. https://www.figma.com/blog/line-height-changes/

OBS: Segundo a Mozilla a tag <sup>
não deve ser usada para isso, apesar de visualmente ficar parecido, não é uma tag feita para tratar wordmark.
para estilizar a wordmark de uma empresa ou produto que usa uma linha de base elevada deve ser feito usando CSS (mais provável vertical-align
) em vez de <sup>
.
Uso apropriado da tag <sup>
- Expoentes tipo 3²
- Abreviações linguísticas como em francês "mademoiselle" = "Mlle"
- Números ordinais como 4°
Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup#Usage_notes