What is CSS for this Super Thick line?

HTML & CSS
1

Hey all,

We are interested for very Thick Font size, and usual CSS I have tried does not give us the Super Bold Thick we want. So what is the CSS code used here:

to give the Super Thick Font on text:
" NATIVE ADVERTISING INSIGHTS"

Thanks,

2

If you right-click on the text and choose “inspect element”, you will be able to see the CSS for that text. It shows a font-family of “Metric” and font-weight of 800, which is bold. If you Google Metric, you will see that the bold version of that font is quite thick.

2 Likes
3

AH OK. Much thanks.
But is the Metric Font I found via Google is listed like for $350!
Is there a Free version of this Font or Font this Bold-able you know?

4

I’m often curious to know what people searched for when they claim they found something other than what they wish.

Did you try Googling “free metric font”? For free, you should be able to find a close compromise but not the original paid version. Finding a suitable font often takes time.

1 Like
5

I believe if you use Arial you can get font-weight:800 which is quite thick.

e.g.

2 Likes
6

Hi there PaulOB,

enclosing the text in a span element will
place the box-shadow beneath each line
of text as the page width is reduced

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

h1 {
    line-height: 1em;
    font-size: 4em;
    font-weight: 800;
    font-family: arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: #162668;
 }

h1 span{
    box-shadow: inset 0 -0.16em 0 0 #77e0c1;
 }

@media ( max-width: 25em ) {
h1 {
    font-size: 3em;
  }
 }
</style>

</head>
<body> 

<h1><span>Another thick text example</span></h1>

</body>
</html>

coothead

2 Likes
7

I didn’t think about the text wrapping :slight_smile:

I’ve added your fix to the codepen thanks.

8

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

1 Like
9

Hi there PaulOB,

…and don’t forget that a media query will
be required round about the 27em mark. :winky:

coothead

2 Likes
10

Yes of course :slight_smile:

Just had a thought and you can make the text appear even thicker using some solid text-shadow (although it does change the appearance a bit).

In some cases that may be good enough to save the hefty expense of a custom font.

1 Like
11

Just so you know, you can use “Font Matchers” to determine the font of something (even from non electronic media). All you do is take a high quality screenshot of a heading with the font you want and the matcher will find similar fonts, often free ones. What the Font is one I’ve used for a long time, but if you google Font Matchers you’ll find a list of others

12

These are useful for text in images. If the text is actual text on the page you can see it in the browser’s own Inspect tool, as @WebMachine did in the first reply.

There is quite a selection of free web font’s on Google Fonts. Use the Category filters and Thickness slider to narrow the selection to what you want.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.