What causes the discrepancy in appearance when using the same font and font weight?

I decided to practice by recoding this template. I got the font "HelveticaNeue Medium" downloaded but when I implemented it, it appeared bolder than the original template. Here is my code and I am aiming for a thinner look:

Desired original appearance:

https://i.sstatic.net/fqx4i.png

My version looking bolder:

https://i.sstatic.net/EUdUK.png

@font-face {
  font-family: "HelveticaNeueMedium";
  src: url("../fonts/helveticaneuemedium-webfont.eot"); /* IE9 Compat Modes */
  src: url("../fonts/helveticaneuemedium-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/helveticaneuemedium-webfont.otf") format("opentype"), /* Open Type Font */
    url("../fonts/helveticaneuemedium-webfont.svg") format("svg"), /* Legacy iOS */
    url("../fonts/helveticaneuemedium-webfont.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/helveticaneuemedium-webfont.woff") format("woff"), /* Modern Browsers */
    url("../fonts/helveticaneuemedium-webfont.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
.container .content .sidebar .menu-wrapper .main-menu .main-menu-links{
  color: #000;
  font-family: 'HelveticaNeueMedium', Arial, sans-serif;
  font-size: 14px;
  line-height: .9;
  font-weight: 50;
  text-transform: uppercase;
}

<div class="container">
    <div class="content">
      <div class="sidebar">
        <div class="menu-wrapper">
<ul class="main-menu">
            <li class="main-menu-item"><a class="main-menu-links" href="#">Home<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Shop<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Product<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Cart<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Checkout<a/></li>
          </ul>
</div>
    </div>
</div>
    </div>
htmlcssfontsfont-size

Answer №1

Be cautious of mistakenly typing <a/> instead of </a>.

After inspecting with WhatFont, it appears that the font-weight is actually 400, not 50.

https://i.sstatic.net/6MzeZ.png

Your browser may have misinterpreted your input of 50 as 500, making the text appear bolder than expected. You might want to consider the following: 

@font-face {
  font-family: "HelveticaNeueMedium";
  src: url("../fonts/helveticaneuemedium-webfont.eot"); /* IE9 Compat Modes */
  src: url("../fonts/helveticaneuemedium-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/helveticaneuemedium-webfont.otf") format("opentype"), /* Open Type Font */
    url("../fonts/helveticaneuemedium-webfont.svg") format("svg"), /* Legacy iOS */
    url("../fonts/helveticaneuemedium-webfont.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/helveticaneuemedium-webfont.woff") format("woff"), /* Modern Browsers */
    url("../fonts/helveticaneuemedium-webfont.woff2") format("woff2"); /* Modern Browsers */
}

body{
  background-color: white;
}

.container .content .sidebar .menu-wrapper .main-menu .main-menu-links{
  color: #000;
  font-family: 'HelveticaNeueMedium', Arial, sans-serif;
  font-size: 14px;
  line-height: .9;
  font-weight: 400;
  text-transform: uppercase;
}
<div class="container">
   <div class="content">
      <div class="sidebar">
        <div class="menu-wrapper">
          <ul class="main-menu">
            <li class="main-menu-item"><a class="main-menu-links" href="#">Home</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Shop</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Product</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Cart</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Checkout</a></li>
          </ul>
        </div>
      </div>
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust text size in a flexible manner within ag-grid using AngularJS

My current task involves increasing the font size of the ag-grid cell and header by utilizing cellClass. The syntax I am using is as follows: ... cellClass: cellStyling, ..... function cellStyling(params){ if(true){ return {'FontSize&apo ...

angularjsfontsstylessizeag-grid

The minification of HTML scripts may cause problems with the <script> tag

Greetings! I have a PHP script that is used to minify the page by removing any comments or spaces. Here is the script: <?php function sanitize_output($buffer) { $search = array( '/\>[^\S ]+/s', '/[^&b ...

javascriptphpjqueryhtml

SELENIUM is unable to choose a name that is generated by JavaScript code

Hello, this is the HTML code I am trying to work with: <input type="text" name="input[220].pk[202].name['CODICE_ORDINE_OLO'].value" alias="" value="" pattern=".*" class="form-control form- ...

pythonhtmlselenium

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

While there are no errors showing up in the Chrome Developers Error code, I am facing an issue with my form where the text fields are not visible. It should be a simple task, but it has turned into a headache for me. I would greatly appreciate any help i ...

javascripthtmlcsslaravel-5bootstrap-4

What is the best way to utilize a single component from Twitter Bootstrap?

Is there a way to use the Twitter Bootstrap plugin from this website ( https://github.com/silviomoreto/bootstrap-select ) for only one specific element on my webpage? I don't want all elements on my site to adopt the Twitter Bootstrap styling (such as ...

htmlcsstwitter-bootstrap

How can I insert horizontal lines within the text of HTML content using a single TextView on an Android device?

There is some HTML content that includes nested unordered and ordered lists along with mixed lists. <html> // HTML content containing nested lists </html> I am attempting to display this HTML content on a single TextView using the following c ...

androidhtmltextviewhtmltexttag-handler

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

Failed CSS login form

Take a look at my login-form (here). I am having an issue where the Text-Field is not aligning properly with the login field - it seems to be shifted 10px to the left and right (margin). Can anyone point out what mistake I might have made? Your help would ...

cssformsauthentication

When I view my PHP file with embedded HTML elements in Laravel on the XAMPP Apache server, the display is not rendering correctly

I've been attempting to translate my HTML project into a PHP format while delving into the world of Laravel. However, after integrating codes from my old HTML files into my new PHP files in Laravel and running them on the XAMPP Apache server, I am onl ...

phphtmlcsslaravelxampp

Lagging speeds in client-side template rendering using Rivets.js

I have a function that renders an array of around 1000 objects, but the html bindings are causing significant performance issues. It currently takes about 5 seconds to complete rivets.bind(). Does anyone have any recommendations for improving performance? ...

javascriptjqueryhtmltemplatingrivets.js

Creating interactive tooltips in Shiny applications with the help of ShinyBS

I am attempting to incorporate the shinyBS package into my basic app. My goal is to generate dynamic tooltip text based on each radioButton selection. To better illustrate my issue, I have drafted a simple code snippet in HTML & JS. While I came acro ...

javascripthtmlrshinyshinybs

Tips for designing a sleek and seamless floating button

I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the ste ...

javascriptjqueryhtmlcss

Arrangement of Columns in Bootstrap 4 - Three Columns Aligned Vertically on the Left, One on the Right

My goal is to achieve a Bootstrap 4 layout like the one shown in the image linked below: https://i.sstatic.net/gY6m5.png For large devices, I want the Search Form, CTAs, and Button ads to be arranged vertically in a column that spans 4 units, while the C ...

csshtmlbootstrap-4

Videos fail to load on iPhone but load successfully on desktop and Android web browsers

I have been attempting to insert a video into my HTML page, but it's not working properly on my iPhone (I only see a crossed out play button). The video loads fine on desktop and Android devices. This issue isn't browser-related as I encounter th ...

htmliosiphonevideo

Exploring ASP.NET Core 3.0: Animated Loading Icons

My latest project involves integrating a loading GIF, and I'm using ASP.NET Core 3.0 with Razor Pages for this task. It's been challenging for me as a newcomer to incorporate some Javascript or Ajax code to achieve the desired functionality. Upon ...

javascripthtmljqueryajaxrazor

Ensure the background image within the ::before selector spans across the entire screen

My CSS code snippet is as follows: div#bodyContainer:before { content: url(/image/colorbar.png); width: 100%; display: block; } Below is the corresponding HTML: <body> <div id="bodyContainer"> ...

css

Launching an app using Electron JS incorporating an Express backend and a standalone HTML frontend

I have a unique situation where my application consists of separate ExpressJS backend and HTML front-end modules. The ExpressJS backend is located at root/scripts/server.js Meanwhile, the HTML front-end is situated in root/index.html. The front-end utili ...

javascripthtmlnode.jsexpresselectron

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

javascriptjqueryhtml

What causes a row to spill out of a liquid-filled container along the horizontal axis?

I need to add a footer to my website, but when I do, it causes the content to overflow on the x-axis. Removing the 15px margins in the .row class is not an option for me because that would require me to redo all of the CSS code. <script src="https:// ...

htmlcssbootstrap-4overflow

As the content scrolls, it covers the fixed background

I'm stumped on how to create this effect that seems like it should be simple. What I'm aiming for is similar to what can be seen here: On that website, when you begin scrolling the image remains in place while the content scrolls over it. Any s ...

css