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
Related
I'm working with an external font type for my website, I have the 3 ttf files, for normal, bold and italic styles.
I'm wondering if I can change the font weight, because I already tried to use the font-weight CSS property, but it seems that it only works for either normal or bold weight, so I cannot use any weight in between.
Is there any way to use other weight for my font? Do I need to include any extra files?
In short: no, you can't use other weights as is - you'll need more files. You can use normal and bold because you've included normal and bold font files. Other weights will require an accompanying font file as well.
For a visual, check out any of the fonts at Google Fonts: https://www.google.com/fonts
You'll notice there are multiple files, each representing a different font weight (and/or style, such as italic).
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 took a CSS quiz at w3schools.com, and I got all of the answers correct except the one below. I tried to search on the subject, but as far as I can see the answer should be correct. Where am I wrong? Really confused with this.
15. Which property is used to change the font of an element?
You answered:
font-family
Wrong Answer!
The font property is the one that changes all aspects of a font, including family, style and weight. The font-family property only changes the font-family. The family is a group of related fonts (or typefaces).
So 'Comic Sans MS' is a font family, while 'Comic Sans MS Bold 10pt' is a font. In speech, people tend to mix up those terms.
font and font-family do different things:
Best illustrated with an example. Arial is a font family. Arial Bold 14 point is a type font. Helvetica is a font family. Helvetica Ultra Compressed 26 point is a type font.
The quiz says that the correct answer is that both font-family and font can be used to set the font. This can be characterized as correct, when the other options are font-family alone and font alone. This question, and the quiz in its entirety, is not as seriously wrong as much of w3schools content (see http://w3fools.com), just largely pointless and inaccurate.
The font-family property sets, as the name suggests, the font family alone. The font shorthand sets all normally settable font properties and also line height. The interpretation of the question revolves around the question “what is a font?” If you mean font family, then font-family sets that only, whereas font also sets font size, font weight, etc. If you mean a specific typeface in a specific size, specific weight etc., then only font does that.
15. Which property is used to change the font of an element?
You answered:
font
Wrong Answer!
Basically the correct answer is both of them (font anf font-family)
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.
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.