In opera, chrome, safari, firefox my website letters are as supposed to be, sometimes bold when I asked them to and sometimes normal. However, in IE 9,8,7 they are always bold no matter what. Even when I say font-weight:normal; or font-style:normal; they stay bold :|
Anyone had this problem and knows how to solve it?
For example I have p:
HTML
<p id="copyright">© 2013. Company Name. All rights reserved.</p>
CSS
#copyright {
float:right;
margin-right:5px;
margin-top:42px;
color:#7d7d7d;
font-family:Helvetica;
font-style:normal;
}
Thanks.
That's because of Microsoft's ClearType
Sadly, many fonts looks nearly the same when switching from "normal" to "bold" :(
You should try with a different font (verdana has for example a stronger difference between normal and bold)
Also, you could try to use a .svg web font, which will not be affected by cleartype
HTH
Helvetica isn't a standard font on Windows. Try changing:
font-family:Helvetica;
to
font-family:Helvetica, Arial, sans-serif;
If that's no good, try flipping the order of Arial and Helvetica – it may be that your Windows box has a bad copy of Helvetica installed, and that the ClearType settings in those browsers are making it look wider than it should be.
Related
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.
You can use <strong> tag instead of css.
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>
You can try this markup as well: <h1><b>CASE STUDY</b></h1>
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.
https://jsfiddle.net/wallyglenn/aez4e3gd/
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.
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).
I have a text element with the follow CSS rules:
box-sizing:border-box;
color:rgb(38, 38, 38);
display:block;
float:left;
font-family:Brandon, sans-serif;
font-size:14px;
font-weight:700;
height:20px;
line-height:16.8px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
text-align:left;
text-size-adjust:100%;
visibility:visible;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
My question/problem is that while the rendered element width is pretty constant across browsers (between 146.50px and 150px) on Safari it's up to 165px almost 10% extra compared to all other browsers. Since I have a few elements in a row this difference makes the whole design not fit on Safari...
I have tried all kind of tricks like:
- letter-spacing, word-spacing
Everything suggested here: Safari font rendering issues
But I cannot find any solution. I have tested the design in:
- Firefox (Windows and Mac), Internet Explorer, Edge, Chrome (Both windows and mac) and the result is more or less constant. Chrome Mac vs Windows have a difference of about 1 pixel.
What is the reason that Safari makes the item so much wider and better yet is there a way to normalize this across browsers (without setting a fixed width of course)
Edit
#font-face {
font-family: "Brandon";
font-style: normal;
font-weight: normal;
src: url("../fonts/Brandon_reg.otf") format("opentype");
}
Two possibilities at first glance:
The otf format is not supported by Safari
There's no bold or 700 version of font Brandon provided, browsers try to mimic the bold version, which may vary in the rendering result. You may try to disable it by adding font-synthesis: none to text or providing the bold version of your font.
Looks like firefox have a troubles in understanding what i want from him. Chrome understands me very well.But firefox is declines to understand that want "normal" fonts when i write (font-face:normal) to a property.It makes my block "ligter" like font in parent block.WHY!?!?!?
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-R.ttf');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-B.ttf');
font-weight:bold;
font-style:normal;
}
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-L.ttf');
font-weight:lighter;
font-style:normal;
}
It is best to use the numerical weights of the font faces i.e font-weight:200 etc since each browser renders fonts differently, therefore you will see a bigger difference when loading bold/lighter as compared to 600/400 etc.
Find out which weights each fonts supports and use the numerical value.
Change the font family names to represent the different font weights eg Myriad Light, Myriad Bold, Myriad for more readable css and less confusion.
The value lighter is invalid for the font-weight property inside a #font-face rule (as the W3C CSS Validator would tell you). Use a numeric weight instead. The proper value should be found in the information provided by the font vendor.
My text that is supposed to be Arial Black is not working on Firefox. It's just displayed as a regular text. So I used Arial font with the Strong tag. I can't make a difference between the way they look. Is there anything I should worry about?
Thank you
EDIT
In this particular case I can't use CSS to do it so that's how i did it:
<font face="Arial Black, Arial, sans-serif"> <strong>Want an undergraduate course with more opportunity for hands-on practice? </strong></font>
Thanks for all the answers and explanations, I believe the strong tag is not wrong here as this is the most important part in the whole message. The visual difference wasn't noticed by anybody, that's confirmation enough for me.
I posted in jsfiddle and it surprised me the strong tag didn't add the bold effect i was expecting! The b did. You can clearly see the difference there! Thanks for that suggestion!
With regard to the question title (as the question text seems to ask differently):
The <strong> tag carries a semantic meaning. Citing MDN on this
The HTML Strong Element () gives text strong importance, and is typically displayed in bold.
So in the first place you should use this tag so mark up content, that you want to emphasize and not to get text marked bold.
Most browsers, however, will implement that emphasizing as just bold printed text.
If you just want to have bold text, use the respective CSS for it!
font-weight: bold;
<strong> holds a certain semantic meaning (along the lines of "more important"), and as such should be avoided purely to style something. If you want to "bold" the text, just add font-weight: 700.
Or you know, fix the reason Arial Black isn't working :P It may be that you didn't add speech marks around Arial Black.
font-family: Arial;
is completely acceptable, but
font-family: Arial Black;
is not. Make sure you have
font-family: "Arial Black";
Yes, there is a considerable difference in using Arial Black vs. Arial with the strong element. I will answer in CSS terms, substituting the CSS setting font-weight: bolder for HTML strong markup. (It's really irrelevant here whether you call for bold face directly in CSS or indirectly with HTML markup that implies a certain default setting.)
It is not clear what you mean by “Arial Black is not working on Firefox”.
The most logical CSS code for the purpose would be:
font-family: Arial; font-weight: 900;
This asks for the boldest available font in the Arial font family; that’s Arial Black when available, or else Arial Bold. Firefox does not seem to support this quite consistently, but many browsers have even more serious problems with font heights. (E.g., Chrome shows weight 600 as bolder than 700.)
In practice it is safer to use the old kludgy way, which refers to a specific font (typeface) as if it were a font family:
font-family: Arial Black;
For example, on IE 8, this is the only way to get Arial Black, whereas IE 9 supports the logical way, too (in “Standards Mode”).
If you use set the font to Arial and font weight to bolder, you get Arial Bold. If you set font-family: Arial Black and font-weight: bolder, you get Arial Black, because there is no bolder font. And Arial Bold and Arial Black are very different.
It’s impossible to say what went wrong in your first attempts, as you did not post the actual code used.
I think you would receive the same effect, however I would recommend using CSS styling instead of using the strong tag.
.arial-black{
font-family: Arial;
font-weight: bold;
}
There is no visual difference between the <strong>, <b> and font-weight:700|bold;.
However <strong> is used by screen readers (for the blind and partially sighted) to put emphasis on the text... therefore using a "bold" font will not result in the same thing for screen readers.
If you don't want to "emphasis" the text for screen readers, then I would recommend you use the <b> tag instead.
<strong> tag does not support all browsers, as Arial and Arial black is concerned both are different in size or weight you can say.
So answer to your question is yes.
Using the font Arial Black in a web page only works for the users that actually have that font installed. (Of course, using Arial also only works on systems that have that font).
Arial Black is not just a bold version of Arial. Although similar, Arial Black has a different look than the bold version of Arial:
Arial, bold
Arial Black
You should use a fallback font for all fonts that you use, so that the browser knows what to use if that specific font isn't available, however it's tricky to use a font that is bold by default, as you can't specify Arial bold as fallback for Arial Black. You would have to make do with using Arial as fallback:
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
You could use a #font-face rule to force Arial Black whenever the bold font-weight of Arial is used:
#font-face {
font-family: Arial;
/* You can add other common names using comma-separated local definitions here */
src: local('Arial Black');
font-weight: bold;
}
#font-face {
font-family: Arial;
src: local('Arial');
font-weight: normal;
}
Now, whenever Arial is set as the font for an element and the calculated font weight is bold (which is what user agents set for the string tag in their html.css definitions), Arial Black is used instead.
strong tag basically creates your text in bold. For your case it makes no difference. But it will create a difference if your font is different and you are using "strong"
I've tested my page in Chrome, FF and IE8 and all the browser render the text this way:
It is defined like:
font-family: 'Arial', sans-serif;
font-size: 0.75em;
font-weight: bold;
I've tried declaring Arial in different ways, using px instead of em and also define the weight in number (600, 800)... But IE9 still renders is "bolder" than the other browsers:
Any help? Thanks
You might have a different problem, since you said you tried a weight of 600, but generally, when you tell IE 9 to render Arial as bold, what you end up seeing is not Arial, but Arial Black. This switch will happen for font-weights of 800 and 900.
To have a bold Arial in IE 9 without switching to Arial Black, use...
font-family: Arial, sans-serif;
font-size: 0.75em;
font-weight: 700;
This should also address the same issue in Firefox.
This question has been answered on StackOverflow before.
It's a browser issue, IE9 renders fonts different. It uses a ClearType technique called DirectWrite.
In my personal opinion, this isn't a big problem. Websites never look absolutly similiar in every browser. If it really bothers you, it's possible to add IE-Hacks (e.g. force the browser to use IE8-rendering) but I wouldn't recommend it.
Just to weigh in, you could place a meta tag into your HTML as a quick workaround, which will tell IE9 to emulate IE8, bringing back the original rendering.
To do this, place <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in your section.
However this will come at the expense of other IE9 features you may need, like the better HTML5 and CSS3 support.
IE in general tends to give me headaches.
What I would do is use conditional CSS and remove the bold from the IE css
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
And then define it like this
font-family: 'Arial', sans-serif;
font-size: 0.75em;
I came across this issue when I accidentally set the font-weight:bold on the body tag. For some reason IE9 rendered all my Arial text bolder than other browsers.