I am having an issue with the CSS font-weight property. I have set the font-weight to 100, and yet I see no difference from when it was at 600. This has been noticed across multiple websites. It has been observed in Chrome, Chromium, and Firefox on Ubuntu.
I am using Helvetica for the font. I need to make the font lighter.
Is there a work-around for this?
Thanks.
You cannot make a font lighter unless the font has lighter typeface. Helvetica does not. (Neither does Arial, which is what Helvetica is actually mapped to in most computers, namely on Windows systems that lack Helvetica.) Most fonts commonly used on web pages do not.
The font-weight declaration, at least with values less than 400, does not modify anything in fonts. It does not make strokes thinner. Instead, it selects a lighter (or bolder, depending on the value) typeface from a font family when available, i.e. when the font designer has crafted it.
In Google Fonts, there are some nice sans-serif fonts with lighter typefaces, such as Roboto, Open Sans, and Source Sans Pro. Note that 100 is the smallest value of `font-weight, and very few fonts have typefaces that light; normally 300, or sometimes 200, is what you should look for.
Not all fonts have all Font Weights inside of them (MDN).
100, 200, 300, 400, 500, 600, 700, 800, 900
Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.
Related
I want to make text super thin, less than
font-weight: 100
Is that possible to do with CSS?
Like this but with helvetica:
CSS font weights do not "make fonts thin" (or bold) when dealing with web fonts. For not-loaded-from-url fonts the font-weight value maps from ultra thin to extra bold, but for custom fonts the weight is "whatever the #font-face binding says it should be": they are merely differentiation numbers used when declaring a font family with multiple weights.
The following is a CSS declaration for a web font that uses three weights, but have a close look at font resource vs. font weight:
#font-face {
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
#font-face {
font-family: "Helvetica Neue";
font-weight: 400;
src: url(helveticaneue-regular.woff);
}
#font-face {
font-family: "Helvetica Neue";
font-weight: 100;
src: url(helveticaneue-ultrathin.woff);
}
This gives us one CSS-declared font family, with three defined weights (using value other than 100, 400, or 800, will lead to undefined behaviour). Now two of those weights point to the same font resource.
The following code will style text using the ultra-thin font, even though the CSS uses weight 800, which for predefined fonts normally means "pretty damn bold":
<p style="font-family: 'Helvetica Neue'; font-weight:800">This is thin!</p>
So if you want to use a superduper thin font: go for it. But that has nothing to do with the CSS font-weight value, and everything to do with the value you assign it in its #font-face rule, and then use in your font-using-CSS.
The weight of the font displayed must be available in the font you have chosen. If the font weight does not exist in that set then you cannot select it with CSS. That is why you need to look at what weights are available in the font you choose. Such things are listed, for example, in Google Fonts but font companies usually list what weights are available, whether they are free or purchased.
For example, Open Sans lists its lightest weight as 300. If you set it to 100, you won't see anything different than if you set it to 300 cause 100 does not exist.
Despite all that, you say you want to set the weight to something less than 100. However, less than 100 is not part of the CSS standard so, no, you cannot do that.
You can find the font here..: https://www.facebook.com/RITCreative/app/208195102528120/
Instead of hoping for an impossible font-weight to magically become real, use Font Forge to make your own font.
What you probably want is Helvetica Nue which is installed on Macs.
Anyways look at Google fonts and use the Filters: Thickness like what Rob suggested.
Use:
font-weight:"lighter"
And you'll get a similar result.
I have a Mac, which means I have Helvetica Neue preloaded locally. I can use it on website mockups I create, however 600 Italic and 300 Normal do not render on said websites, instead they simply render as 600 Normal and 200 Normal respectively.
I can use both of these font weights/styles just fine on Pages for example... Additionally, this happens on multiple Macs and multiple versions of OS X, so it seems like every single Mac in the world has this issue... It doesn't make sense, though, because ALL of the font variants are right there, 100, 200, 300, 400, etc...
Any ideas?
EDIT: I can get 300 Normal and 600 Italic to work if I use #font-face to point to a CSS file for a font I made up ("Duplicate Neue"), which in-turn points to the .woff files for Helvetica Neue's variants... Still, if the fonts are local, why won't they render!?
Got it....
As per this thread- Using Helvetica Neue in a Website - "Helvetica Neue" isn't going to cut it for font-family:.
To achieve certain font weights for the local font Helvetica Neue, one must use other font-family values, such as "HelveticaNeue-Thin" (200), etc. Font weight does not have to be defined for such font-families, since HelveticaNeue-Thin is of course only one font weight.
It should go without saying, but support for this font is very limited (it's preloaded on Apple devices only as far as I know), and for anyone who is insistent on using this font (like me), it is strongly suggested that you include backup fonts that will load on Windows, Android, Blackberry, Chrome OS, etc. devices.
I can't seem to find a font weight lower than 300 using Open Sans anywhere. In photoshop I can get the desired look from selecting 'Light'. Helvetica Neue's 100 weight is what I'm looking for. Is there a way I can make it myself?
https://www.google.com/fonts/specimen/Open+Sans
There is no font weight typeface of Open Sans lighter than 300. Since Open Sans is under Apache License, you may create derivative works, such as typeface similar to Open Sans Light but lighter. Creating a typeface, with a font editor, is nontrivial, especially if the result should look good.
What you see in Photoshop is generally different from what you see in a browser, and different browsers render fonts differently, too.
The lightest weight of Open Sans is 'Light', which is the 300 weight. You should be able to use it by including this stylesheet from Google Fonts:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
Be sure to set the correct font-weight in your CSS where you intend to use Open Sans. Example:
h1 {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
}
The Open Sans Light (300) appears to be "lighter" in weight than Helvetica Neue Light when comparing same Cap heights Specimens with the Specimen [link] you provided.
If you want to get something "lighter" than 300, try converting the text to outlines and increase the outline stroke (in the bg colour) to cover the flabby part. The shortcut will come back and haunt you since the text becomes artwork and can't be edited without redoing the text. I wouldn't suggest this for more than a word or two.
I have a font loading in my HTML from a web template:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
What does the ":300" mean and do?
It primarly sets the font-weight for the CSS that is generated. But it also changes the source font-family also.
Ex.
300 - Open Sans Light
600 - Open Sans Semibold
800 - Open Sans Extrabold
Compare your link vs http://fonts.googleapis.com/css?family=Open+Sans:800
Font-weight may be defined as:
normal
Normal font weight. Same as 400.
bold
Bold font weight. Same as 700.
lighter
One font weight lighter than the parent element (among the available weights of the font).
bolder
One font weight darker than the parent element (among the available weights of the font).
Or it can be defined with a numeric representation:
100, 200, 300, 400, 500, 600, 700, 800, 900
Numeric font weights for fonts that provide more than just normal and bold.
If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight).
This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.
To that particular case, the font is being set a bit lighter then the normal boldness.
It's a font weight. 300 is normal weight.
It's in CSS2: http://www.devguru.com/technologies/css/quickref/css_fontweight.html
I don't know if this is an Illustrator spec or where exactly, but a designer gave me this spec for a font:
Helvetica Neue (T1), 35 thin, 20 pt, off/ 454545, on/70a63a
There are other similar ones for different areas of the page, but if you can tell me how to match this one using CSS, hopefully I can figure out the rest.
Thanks!
It may be difficult as only a SMALL subset of fonts are supported by all browsers, and MAY look completely different in one browser as opposed to another (see Fantasy type font in Firefox vs IE).
Here is some css to get you started though
.myCss {font-family:Helvetica;font-size:20pt;font-weight:100;color:#454545}
.myCss:hover {color:#70a63a}
Font-weight, in current browsers supports pretty much NORMAL and BOLD. But in new browsers will range from 100 to 900, with 700 being todays BOLD, and 400 being todays NORMAL.
NOTE: Hover will only work on link elements in stupid IE 6, support for it is MUCH better in IE 7 and waaay better in firefox.
This will get you as close as possible on all platforms:
font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:100;
font-size:20pt;
The font name is Helvetica Neue. The T1 means PostScript type 1. 35 Thin is the weight/variation. 20 pt is the size. off and on are the colors.
Helvetica Neue (or Helvetica or Arial--all three are very similar) is present on just about every computer. The thin variation is not. I recommend doing font family Helvetica Neue, Helvetica, Arial, font-size: 20pt, and setting the font weight to the lowest possible: 100. Some variations of Helvetica/Arial may not have lighter font-weight variations, so setting the font-weight may not do anything.
If you absolutely need the exact font (and if your designer expects this in anything but headings when designing for the web, you need to go have a talk with said designer), you can use SIFR or images.