How to set super thin “font-weight” (less than 100) in CSS?
Clash Royale CLAN TAG#URR8PPP
How to set super thin “font-weight” (less than 100) in CSS?
I want to make text super thin, less than
font-weight: 100
Is that possible to do with CSS?
Like this but with helvetica:
I know, i tried to find font wich looks like that on a picture but then i must to change font-size or something like that, i will try to find font like that now :)
– NiKoLaPrO
Dec 6 '15 at 3:09
you could turn on anti-aliasing, sometimes that renders the font more true to native....
-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: anti-aliased;– Alex
Dec 6 '15 at 4:08
-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: anti-aliased;
The simple answer is, no, you can't 'make' a font thinner with CSS you need to actually find a thinner font.
– DA.
Dec 6 '15 at 5:50
4 Answers
4
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.
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.
font-weight
The following is a CSS declaration for a web font that uses three weightss, 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 ultrathin 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.
This is sort-of true using if assigning weights via
@font-face in that you can manually assign the font-weight to a particular file, but not true if you're not. In other words, if you're declaring Helvetica Neue in the font stack (not actually loading it as a web font), then the font-weight does refer to a specific font weight within that font family. In fact, it's assumed that's why you'd want to assign them that way with @font-face in the first place so that it actually works in the same way.– DA.
Dec 6 '15 at 5:47
@font-face
@font-face
if you're declaring a non-web-safe font in the font stack without a resource to back it (using @font-face), you are doing fonts on the web rather wrong. Not everyone is on the same OS, with the same fonts installed, as you are, so write your CSS based on that. Helvetica Neue is a prime example of that (it comes with OSX only)
– Mike 'Pomax' Kamermans
Dec 6 '15 at 6:04
The whole point of the font stack is to choose several fonts so that you do cover the bases (as one sees fit for the situation). Sometimes you need to use Helvetica Neue, in which case loading it as a web-font certainly makes the most sense. But sometimes it's just a 'nice to have' if the user has it installed, and not the end of the world if they don't.
– DA.
Dec 6 '15 at 6:08
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.
I already found that font but im trying to make helvetica thinner or something like that :D
– NiKoLaPrO
Dec 6 '15 at 4:10
What did you mean when you said "...i will try to find font like that now :)"?
– zer00ne
Dec 6 '15 at 4:11
Well, i want to find font like that but not with that rounded lines and thet, something like helvetica :)
– NiKoLaPrO
Dec 6 '15 at 4:17
Updated answer.
– zer00ne
Dec 6 '15 at 4:18
Sorry to be crude, but this isn't really an answer to the problem
– Alex
Dec 6 '15 at 4:20
Use:
font-weight:"lighter"
And you'll get a similar result.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You need to find a font that looks like that or use an image. There may be some css hacks you can mess around with (text-shadow, transform:scale), but it probably won't end up looking good.
– Ricky Goldman
Dec 6 '15 at 3:05