Headings look too much like bold font?

meta
1

WHAT. THE. FUCK.

:-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1:

…Supposedly that isn’t ‘descriptive’ enough, but I’m letting it stand.

BOLD

Hey, headings got smaller.
Reckon we could have a bold font that doesn’t look like a heading now?

2

Well let’s see.

--- 
### Heading 3
## Heading 2
# Heading

This is a **bold font**   

---

Heading 3

Heading 2

Heading 1

This is a bold font

Hmm, the preview looks significantly different than the rendered post @awesomerobot.

We have this problem where we change CSS but we fail to make the preview sync up. That’s… really bad. We need to set up our CSS so changes affect the preview too, otherwise we are in a world of hurt.

1 Like
3

No, no, no - BOLD FONT looks too much like a heading!

What’s wrong with, you know, the bold version of this font instead of an entirely different font?

Okay, now I look at it again, it could be just a really heavy version of this one. But the one in the preview looks a lot more proper.

Hey, I didn’t realise it was smaller there too. That might be part of the picture…

Hey, here’s a thing you might be able to sort out in the process of sorting this - reckon you could make the line breaks happen at the same place, at least for those of us with the screen real estate?

4

They are using the bold version of the font, both for <strong> tags within the text and also for headings.

Looking at the source shows that BBS uses the Adelle typeface via Adobe Typekit. Adelle is a proper typeface set and includes separate font files for thin, normal, semibold, bold, italic, bold-italic, and a few other variants. Rather than letting the browser fake-bold the normal font, the bold Adelle has modified glyphs, modified kerning and hinting, and all the other things needed to make it look nice when bolded.

Also, judging by your screenshots, you’re also using Windows and not using IE10, which isn’t doing your typeface rendering any favors. This is what the typeface looks like when rendered correctly:

adelle.png719×146 20.1 KB

Doesn’t help the mismatch between preview and post, since that’s definitely broken, but they’re using the same font throughout.

5

They should match now!

6

Yep better but there is a problem here – we keep having to do manual work to keep the preview and the main body in sync, that’s a bad idea and will result in a lot of problems down the road. We should restructure our CSS so they both target the same classes, on the body and the preview.

1 Like
7

This topic was automatically closed after 1262 days. New replies are no longer allowed.