Getting a THICK h1

Question

I've been doing website design for a long time now but one thing which has me absolutely stumped is how people achieve that THICK bold h1 effect. Here is a nice example of what I mean -

Even after applying the font weight of 700 it always seems to look thin (regardless of whatever font I pick) -

I'm probably going to feel so stupid when I find out how its done.

@Swellar No in this case BUT I have tried it before with the same fonts as the example and I can never get it as bold. — user3599852, Jun 28 '17 at 04:00

score 2 · Answer 1 · answered Jun 28 '17 at 04:11

2

You need to try a different font. The one in the example picture looks similar to Bebas Neue.

However, you can also very easily see exactly what CSS was used to achieve that effect by right-clicking the text and selecting Inspect Element in Chrome.

By googling that exact text I found the website you were looking at, and from that we can see they they're using a custom font, DriveTribe:

answered Jun 28 '17 at 04:11

Clonkex

3,373
7
38
55

1

This was just a fast example, I've come across websites doing it in the past with different fonts. I'll give your suggested font a test though. – user3599852 Jun 28 '17 at 04:13
@user3599852 How'd you go? Did my answer solve your problem? – Clonkex Sep 07 '18 at 03:56

score 0 · Answer 2 · answered Jun 28 '17 at 04:07

0

Have you tried making the text bold with the <b></b> or <strong></strong> tags?

p {
 background-color: black;
 color: white;
 font-size: 60px;
 font-family: Verdana
}

<p><strong>This is a text</strong></p>

answered Jun 28 '17 at 04:07

ob1

1,425
1
20
33

score 0 · Answer 3 · answered Jan 19 '20 at 03:30

0

Check to see whether your font has a heavier style available. For example, I was using the default style (i.e., 'regular') of this one not realizing that there are other styles available: https://fonts.google.com/specimen/Montserrat

answered Jan 19 '20 at 03:30

Bluebird45

147
2
10

Getting a THICK h1

3 Answers3