Bold fonts gets very wide in some browsers

Question

I know that browsers render fonts differently especially bold fonts look different in all browsers unless font-weigh is set to normal but this stops us using bold fonts.

When I apply font-weight: bold; to #default_menu element, menu output gets very wide in some browsers compared to some others and it is a bit too much to be hones, not like 1 or 2 px.

Is there any chance to solve this issue or at least make it better?

Thanks

Fiddle Link

HTML

<ul>
    <li><a href="#nogo" title="HOME">HOME</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="HOW IT WORKS">HOW IT WORKS</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="PARTNERS">PARTNERS</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="BLOG">BLOG</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="CONTACT US">CONTACT US</a></li>
</ul>

CSS

#default_menu
{
    font-weight: normal;
}
#default_menu
{
    font-size: 16px;
}
#default_menu ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#default_menu li
{
    display: inline;
}
.main_menu_seperator
{
    padding: 0px 10px 0px 10px;
}

"...gets very wide in some browsers compared to some others..." Which browsers? — Craig Otis, Sep 06 '13 at 11:59
possible duplicate of [Same font yet its weight seems different on different browsers](http://stackoverflow.com/questions/5082632/same-font-yet-its-weight-seems-different-on-different-browsers) — Jukka K. Korpela, Sep 06 '13 at 14:15

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

Check the following thread.

I hope this is your issue

Same font except its weight seems different on different browsers

edited May 23 '17 at 10:32

Community

1
1

answered Sep 06 '13 at 12:03

Arun Bertil

4,598
4
33
59

I read this before but I though there could be a solution since but obviously not. Thanks – BentCoder Sep 06 '13 at 12:45
@MadMax, intentionally posting a duplicate, without even referring to an old question yoy’ve read, is not constructive. To help people find answers, we should improve answers to existing questions, instead of spawning copies of a question with different sets of answers. – Jukka K. Korpela Sep 06 '13 at 14:17

Falguni Panchal · Answer 2 · 2013-09-06T12:30:25.307

0

Like this

please try if you want normal font please write font-weight:100; and if you want bold font please use font-weight:600;

demo

css

if you want font-weight:normal not bold use below selector;

#default_menu
    {
       font-weight:100;/* normal font*/
       font-size: 16px; /*bold font*/
    }

OR

if you want to font-weight:bold please use below selector

#default_menu
{
font-weight:600;
font-size:16px;
}

edited Sep 06 '13 at 12:30

answered Sep 06 '13 at 12:02

Falguni Panchal

8,873
3
27
33

Although nothing changed, how do I benefit from using 600/100 instead of bold/normal? – BentCoder Sep 06 '13 at 12:20
I know I read it on W3Schools but do I benefit when I use numbers instead of bold, normal etc? Also, 400 is the same as normal, and 700 is the same as bold... – BentCoder Sep 06 '13 at 12:45
@MadMax try 500,600 ? – Falguni Panchal Sep 06 '13 at 12:46

score 0 · Answer 3 · answered Sep 06 '13 at 12:29

0

The font depends on the browser and operating system.

Check this

font-weight property

font-weight: 400 /* is normal, not 100 */
font-weight: 700 /* is bold, not 600. */

answered Sep 06 '13 at 12:29

Diego

366
1
7

Bold fonts gets very wide in some browsers

3 Answers3