How do I make the plus sign more bold? Bolding the "+" makes little to no difference compared to the text.
#plus_bold, #text_bold {
font-weight: bold;
}
http://jsfiddle.net/qe2em/
You can try "heavy Greek cross", http://www.fileformat.info/info/unicode/char/271a/index.htm
Or plus sign from FontAwesome: http://fortawesome.github.io/Font-Awesome/icon/plus/
Later one is more correct if you use it as an icon.
You can try to change the font-family
#plus_bold, #text_bold{
font-weight: 900;
font-family: "Lucida Grande", tahoma, arial, sans-serif;
}
here is how it looks JsFiddle
You can use a different font family. The design of glyphs in bold typefaces varies by font family. For example, in Times New Roman, the most common browser default font, the stroke width of bold “+” is almost identical with that of regular “+” (and typically the difference gets lost in rasterization) unless the font size is fairly large, 18pt or more. In Arial, there is a visible difference even in 11pt size.
The choice of fonts should of course be made after careful consideration of many aspects, and the boldness of a bold “+” is probably among the lesser details.
You can do font-weight:900; which is bolder than bold (700). 900 is the maximum; besides that, you'd have to actually change the font size.
Related
Often, in proportional typefaces, normal plus and minus signs (U+002B and U+002D) are different widths:
+100
-100
As a result, numbers with a mix of signs don't align properly when left-aligned, and when right-aligned, although they align, the difference in the visual 'mass' of the sign is displeasing.
The effect is worse in certain fonts; for me, Stack Overflow is in Liberation Sans, where the difference is modest, whereas my default serif font is DejaVu Serif, where it is substantial.
I would like to make the plus and minus signs the same width, and visually balanced.
One approach here is to use a proper minus sign (U+2212) which is the same width as a normal plus (U+002B). However, this is not used by the standard formatting and parsing functions in any language i know; using it would be a pain, and could break copy-and-pasting. I would rather not do this.
Is there any way to use CSS to indicate that the normal hyphen-minus sign (U+002D) should be displayed as a minus rather than a hyphen?
font-variant-numeric: tabular-nums; doesn't seem to do it (there is no particular reason to think it should, but it was worth a try!).
Use a monospace font family when displaying those characters. That way, they will line up vertically the way you want. Here is an example font stack for sans-serif monospace fonts:
font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;
Use in HTML:
<style>
.monospace{
font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;
}
</style>
<div class="monospace">
-100<br/>
+99<br/>
-483
</div>
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.
[Before we start] I'm a Chinese user, and there are so many different weights of Chinese font. They are in the same font-family, but they didn't stay together like latin fonts, e.g., Huakang Chaohei(~Black) and Huakang Cuhei(~Bold).For that, I have to choose different font-family, rather than font-weight.
So this question happens so frequently to me when choosing different font-weight and font-family.
Just like the following picture, can I use font-family: "helvetica bold" in CSS? Or, use font-family: helvetica; font-weight: 600 to specify the bolder version of helvetica?
UPDATE:
Thanks all. So how to do with the name different than bold?
You would use the latter, like this:
font-family: helvetica;
font-weight: bold;
or you can use this:
font-weight: bold;
Note, you likely should include more fonts, as not all browsers will render helvetica, so you could use something like this:
font-family: Helvetica,Arial,sans-serif;
Edit to match the above edit:
he values you can use are normal (which is the default weight), bold, bolder, lighter. You can also use the values from 100 to 900, the higher being bolder. You can also use initial and inherit.
Note font-weight should work fine with Chinese; the fonts themselves are the ones you need to pay attention to.
I used Arial italic on a website. I did it this way:
font-family: Arial;
font-style:italic;
font-weight:100;
In Photoshop Arial italic looks as thin as regular is. On the website it looks bold. I dont know if this is related to faux styles. If yes, how can I use the real Arial italic (In my fonts folder theres just one font, called Arial, no ArialItalic or something). If no, where does this come from and can I do something about it?
Here is a fiddle: http://jsfiddle.net/h84Vv/2/
Of course I don't know, if this is related to my system.
font-family: Arial;
font-style:italic;
font-weight:100;
try this:
http://jsfiddle.net/h84Vv/2/
If you want to text bold
Italic
Bold
Normally, the Arial font family contains a regular, italic, bold, and italic bold typeface, and with your settings, you get the italic typeface. Setting font-weight: 100 has no effect, since Arial has no typeface lighter than normal.
If you have removed the italic typeface, then browsers may use normal typeface as slanted (“fake italic”, though it’s not really italic but slanted, in a synthetic way). It should not cause the text to look bold. In the absence of more information (like a description of the font family under the name Arial in the system and some screen shots) it is impossible to analyze the issue further.
I am new to Google Fonts. I have gotten this URL from Google:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
My question is, how to use the various fonts I have selected. They are, as you can see, Ubuntu Normal 400, Ubuntu Normal 400 Italic, Ubuntu Bold 700, and Ubuntu 700 italic.
I have tried everything but can only use plain "Ubuntu" and nothing else.
Please help!
Here is me using italic version of this: http://jsfiddle.net/6wzuy/
font-family:ubuntu;
font-style:italic;
font-weight: 700;
The technique is to use CSS font-style Property
font-family: 'Ubuntu', Arial, serif; font-weight: 700;
EDIT: You have to include separate font libraries of italics and bolds in order for them to work as intended.
If you don't include the italic and bold versions, the browser will try to compensate, but will more than likely do a very poor job. More about this in this List Apart article.
If you want to add font styles to your fonts, always add the extra font styles to and specify it in your document. Especially in large serif font it can make a huge difference.
The Google code you use declares regular, italic, bold, and bold italic typeface (specific font) as members of the font (font family) “Ubuntu”. This implies that you use italic and bolding just as you do when using normal fonts.
You can use font-style: italic to request for italic typeface and font-weight: bold (or, equivalently, font-weight: 700) to request bolding. Note that many HTML elements imply italic or bold by default; for example, h1, strong, and th elements imply font-weight: bold.
There are other ways of using #font-face so that each typeface is declared as a font family of its own; FotSquirrel does that. But the approach applied by Google is more logical and compatible with the way fonts are generally used in HTML and in CSS.