1

UPDATE. I've tried all the suggestions. But still can't get Outlook to display bold!

UPDATE 2. See my solution below

I'm creating a HTML email newsletter. The <h1> is bold, but when I test in Outlook (2007, 2010, 2013 etc) the font doesn't appear to be bold. Either Outlook is applying a faux bold (fattening) to the regular weight, or ignoring the bold. Whereas all other email clients use the true bold weight of the typeface.

Is there anything I can do? Surely a heading <h1> should be bold by default, without having to write css or put a <strong> or <b> around it?

Here's my code (which gets inlined):

h1 {
font-family:Arial Bold, Arial, sans-serif;
font-weight:bold;
}

Perhaps I need to put Arial Bold in quote marks?

font-family:'Arial Bold', Arial, sans-serif;

Here are two images. Top is how it should look. Bottom is the Outlook.

enter image description here enter image description here

Markeee
  • 523
  • 2
  • 8
  • 23

5 Answers5

3

You can use <strong> tag instead of css.

Firefly
  • 214
  • 1
  • 11
3

Unfortunately there's not a great, reliable way to do this with Arial Bold in the mix.

Arial Bold is not installed on every system, so a font stack of font-family:Arial Bold, Arial, sans-serif; will skip over Arial Bold and use Arial instead. Even if you download a copy of Arial Bold and send it in as a web font, Outlook doesn't support web fonts.

So on systems that don't have Arial Bold installed, we're stuck with regular Arial. We can faux bold Arial:

<h1 style="font-family: Arial Bold, Arial, sans-serif; font-weight: bold;">Headline Text</h1>

This might be ok, but having Arial Bold in the font stack is still a bit of a wild card. On systems that do have Arial Bold installed, we'll see Arial Bold rendered... and faux-bold'd.

I'm not sure what's best for your project, but if it were me, I'd remove Arial Bold from the font stack and just faux bold regular Arial. Every system has Arial, so it's more predictable.

<h1 style="font-family: Arial, sans-serif; font-weight: bold;">Headline Text</h1>
Ted Goas
  • 7,051
  • 1
  • 35
  • 42
  • I understand that Arial Bold isn't a web safe font. I presumed that Arial came in four styles: regular, italic, bold and bold italic and so specifying Arial Bold would select the Arial bold cut of the typeface? Or do the versions of Outlook using Microsoft Word to display the email simply faux bold (it is not sophisticated enough to use the Arial true Bold)? What a mess! – Markeee May 17 '18 at 13:08
  • What a mess indeed :) I believe **Arial** and **Arial Bold** are two different fonts, so bolding Arial does not use Arial Bold. – Ted Goas May 17 '18 at 13:32
  • 1
    Thanks. I'm going to take 'Arial Bold' out of the font stack. I haven't tested extensively, but from what I can see it doesn't make any difference, so it may as well not be there. – Markeee May 18 '18 at 09:33
2

You can try this markup as well: <h1><b>CASE STUDY</b></h1>

Bálint Budavölgyi
  • 510
  • 3
  • 18
0

As @Ted Goas points out, Arial Bold is not a web safe font. In the past it was not part of IOS either. My suggestion is to use Arial with a font-weight: 800;. It's not quite the same as Arial Bold, but it's a decent fallback.

If it's a problem you only notice in Outlook and want to preserve the Arial Bold as a font for other clients, create an Outlook-only style sheet below your existing style sheet at the end of <<head>:

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  h1 {font-family: Arial, sans-serif !important; font-weight: 800;}
</style>
<![endif]-->

You can do this to fine-tune any issues you find with styles regarding Outlook.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • Wouldn't font-weight:900 map to a heavy weight of Arial. As there isn't an Arial Heavy weight it would map instead to Arial Bold weight (font-weight:700)? – Markeee May 17 '18 at 13:04
  • @Markeee I was wrong. `font-weight:800;` is the max for Arial. There is no 700. At the max font-weight, it doesn't quite look like Arial Black, but it's a good approximation. I will update my answer. – gwally May 17 '18 at 13:53
  • @Markee Ariel does not have a font weight of 900. – gwally May 19 '18 at 02:59
  • Hi gwally. There are four cuts of the typeface Arial. Regular (400) Italic (400 italic) Bold (700) Bold Italic (700 italic). See the link. Bold matchs to font-weight 700. https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight – Markeee May 20 '18 at 07:18
0

The problem is with versions of Outlook that use Microsoft Word to display the email. I beleive that these versions of Outlook / Word are not sophisticated enough to use the true bold cut of the typeface. Rather they use a fake / faux bold – simply fattening the letters of the regular weight. This is why they appear different, 'lighter' and uglier than the true bold cut of typefaces.

The same with italic. Older versions of Outlook / Word simply slant the regular roman version of the font - they don't use the italic cut of the font (that some poor typographer has spent months or years designing).

Markeee
  • 523
  • 2
  • 8
  • 23