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.
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'm using Open Sans font from Google Fonts on one of my page, and altho I'm using almost the same style regarding the font as Google does, my diacritics are somewhat thicker than the rest of the letters:
(you can see the live version at www.cabsurf.com)
The only difference in my CSS is the way I declare the font family:
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
But it will look the same even if I leave only Open Sans in the declaration.
I've placed the same text in Google Fonts page above (using inspect element in Chrome) and the text is rendered correctly on their side, so I know the font is ok.
Any idea what am I doing wrong ?
EDIT:
Using Chrome 27 / Firefox 22 on MacOS X 10.8.4
Google will use any sub-set of the font it wants. Did you make sure to check the correct boxes when you got the code for it?
When I append <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>to your <head>, all the characters look correct.
Just make sure to check whichever sub-sets you need so you don't get unnecessarily large files.
I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
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.