Text in and after span drops down lower than rest of text in <p>

HTML & CSS
1

I have two paragraphs that are supposed to be on two different lines. All that is in each paragraph should be on one line, but in the second paragraph I have a span that contains text to be a different font.
The text in the span and after the span though is lower as if it is being pushed down by a margin-top. It is also pushed to the right some.

Any idea on how I can move the text in the span and after the span to the same line as the other text in that paragraph ?

Here is a link to the page.

I would appreciate any help in fixing this.

Thanks in Advance,
Team 1504.

2

it’s a typographical choice issue, the font you have chosen has a bad baseline ( ah, free fonts… :stuck_out_tongue: ) if you are certain that font will always be used you could "correct this by using relative position and some ‘em’, or preferably ‘ex’ ,value equal to the offset. you could also try wrapping the other part of the text in a span , giving both display:block, align:top; tho am not sure if that will help if the font face itself , has actual baseline issues. It’s worth a try before resorting to RP tho.

BTW, I notice you gave your p.titles {display:inline; } which makes no sense if you actually wanted them to display one on to of the other.

3

Thank you for replying!

Ah, okay. Well, i’m certain I’m going to use this typeface / font.

Why not relative positioning and px for the units. Why, em? and I’ve never heard of ex before.

the display:inline was a desperate attempt to fix the issue. I have removed that now in my copy.

4

px sizing of text is just bad practice in general, but in this specific case you are trying to correct an error of poorly created font. A font which appears to have leading built in. so you want to make your adjustments relative to the font size, thus EMs or EXs. Really either will do, but EX units are based on a font’s x-height so I just tend to pic that when working on a y-axis.

5

you are making me really want to switch to a different typeface / font. But, anyway, thank you for explaining. I’ll change the units of the positioning to rems, which I used for the font-size.