I'm currently using {font-weight:bold} for an Arial font, but it seems to be too thick. Can I make things a little thinner? I cant find any other method to do it. I've used {font-weight:400} - Specifying in increments of 100. But it's the same thing. Too thick. Any other way to make a font a bit bolder than the other text?
There are many many many fonts that look like Arial that you can play with , some are bolder then others ,
Try looking for a font In Google WebFonts and you can attach it into your css to ensure it will work in every browser
The Arial font has no typeface with a weight between normal (400) and bold (700). Some other fonts do. So you might choose a different that either has an in-between weight or has a bold typeface that suits you needs and eye.
For example, the Google fonts Source Sans Pro and Open Sans are more or less similar to Arial, and both of them have a semi-bold (600) typeface.
It is possible to create sort-of fake bolding of different degrees using text shadowing, with the color being the same as text color, in CSS, e.g. text-shadow: 1px 0 black. But the result is poor. Genuine bolding is rather different from such artificial thickening of strokes.
Sorry man, but Arial Bold is not too thick as you say, It's just "Bold". (Arial Black or Alfa Slab is what then?). But if YOU feel it's too thick for you, you can try a webFont that have a light style and then you can use the regular one as as your Bold style.
Related
Title isn't accurate but I guess good enough.
Synopsis: Company product uses bootstrap and our default font has been set to a specific free font; so all #site-font, #site-font-bold, etc are all pointing to specific woff files.
We have clients that we customize for. One client wants Arial font for most everything. I cannot seem to set #site-font-bold to Arial Bold - it displays Times New Roman.
How can I set all the #site-font-xxxx variables to various Arial fonts?
I used this for bold:
#site-font-bold: "Arial Bold";
Is it that Arial Bold should be something different? I tried ArialBold - no luck.
You can't specify Arial Bold as a font because the Bold variant comes under the Arial family and will be chosen by the browser when you have a font-weight: bold or similar property. I don't know what generator you are using but try setting Arial as the value for #site-font-bold and see if the bold text is displayed correctly.
I've been looking around and can't seem to find a definitive answer to this.
How do I get font weights lighter than 600 to show correctly for textarea fonts?
Fiddle: http://jsfiddle.net/bk53K/
Code:
<textarea rows="7" class="randomText">Never gonna give you up Never gonna let you down Never gonna run around and desert you Never gonna make you cry Never gonna say goodbye Never gonna tell a lie and hurt you
textarea {
border: none;
resize: none;
font-size: 30px;
font-weight: 100;
}
Not all fonts are available in all weights. As the MDN states:
The font-weight CSS property specifies the weight or boldness of the
font. However, some fonts are not available in all weights; some are
available only on normal and bold. 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.
Behavior will also vary by browser, font, and client OS.
You get font weights lighter than 600 (or lighter than 700 for that matter) by declaring a font that has a typeface with such a weight. Most fonts that people normally use on web pages don’t have such typefaces. In your case, no font is declared, so browsers will use their default font for textarea, normally whatever the generic name monospace maps to. It is virtually certain that it does not have any weight smaller than normal (700).
The practical way to get lighter font weights is to use suitable Google fonts. Most Google fonts have just normal and bold, but some have other weights too. The weight 100 is very rare, though.
If you wish to use a light monospace font for textarea, you might consider Source Code Pro, which is a simple sans-serif monospace font with weights 200, 300, 400, 500, 600, 700, and 900. Example:
<link rel='stylesheet' href=
'http://fonts.googleapis.com/css?family=Source+Code+Pro:300'>
<style>
textarea {
font-family: Source Code Pro;
font-weight: 300;
}
</style>
<textarea>Hello world</textarea>
Here's a great article about font-smoothing that might do the trick. I find using -webkit-font-smoothing: antialiased; brings my fonts much closer to their desktop weights than without.
My text that is supposed to be Arial Black is not working on Firefox. It's just displayed as a regular text. So I used Arial font with the Strong tag. I can't make a difference between the way they look. Is there anything I should worry about?
Thank you
EDIT
In this particular case I can't use CSS to do it so that's how i did it:
<font face="Arial Black, Arial, sans-serif"> <strong>Want an undergraduate course with more opportunity for hands-on practice? </strong></font>
Thanks for all the answers and explanations, I believe the strong tag is not wrong here as this is the most important part in the whole message. The visual difference wasn't noticed by anybody, that's confirmation enough for me.
I posted in jsfiddle and it surprised me the strong tag didn't add the bold effect i was expecting! The b did. You can clearly see the difference there! Thanks for that suggestion!
With regard to the question title (as the question text seems to ask differently):
The <strong> tag carries a semantic meaning. Citing MDN on this
The HTML Strong Element () gives text strong importance, and is typically displayed in bold.
So in the first place you should use this tag so mark up content, that you want to emphasize and not to get text marked bold.
Most browsers, however, will implement that emphasizing as just bold printed text.
If you just want to have bold text, use the respective CSS for it!
font-weight: bold;
<strong> holds a certain semantic meaning (along the lines of "more important"), and as such should be avoided purely to style something. If you want to "bold" the text, just add font-weight: 700.
Or you know, fix the reason Arial Black isn't working :P It may be that you didn't add speech marks around Arial Black.
font-family: Arial;
is completely acceptable, but
font-family: Arial Black;
is not. Make sure you have
font-family: "Arial Black";
Yes, there is a considerable difference in using Arial Black vs. Arial with the strong element. I will answer in CSS terms, substituting the CSS setting font-weight: bolder for HTML strong markup. (It's really irrelevant here whether you call for bold face directly in CSS or indirectly with HTML markup that implies a certain default setting.)
It is not clear what you mean by “Arial Black is not working on Firefox”.
The most logical CSS code for the purpose would be:
font-family: Arial; font-weight: 900;
This asks for the boldest available font in the Arial font family; that’s Arial Black when available, or else Arial Bold. Firefox does not seem to support this quite consistently, but many browsers have even more serious problems with font heights. (E.g., Chrome shows weight 600 as bolder than 700.)
In practice it is safer to use the old kludgy way, which refers to a specific font (typeface) as if it were a font family:
font-family: Arial Black;
For example, on IE 8, this is the only way to get Arial Black, whereas IE 9 supports the logical way, too (in “Standards Mode”).
If you use set the font to Arial and font weight to bolder, you get Arial Bold. If you set font-family: Arial Black and font-weight: bolder, you get Arial Black, because there is no bolder font. And Arial Bold and Arial Black are very different.
It’s impossible to say what went wrong in your first attempts, as you did not post the actual code used.
I think you would receive the same effect, however I would recommend using CSS styling instead of using the strong tag.
.arial-black{
font-family: Arial;
font-weight: bold;
}
There is no visual difference between the <strong>, <b> and font-weight:700|bold;.
However <strong> is used by screen readers (for the blind and partially sighted) to put emphasis on the text... therefore using a "bold" font will not result in the same thing for screen readers.
If you don't want to "emphasis" the text for screen readers, then I would recommend you use the <b> tag instead.
<strong> tag does not support all browsers, as Arial and Arial black is concerned both are different in size or weight you can say.
So answer to your question is yes.
Using the font Arial Black in a web page only works for the users that actually have that font installed. (Of course, using Arial also only works on systems that have that font).
Arial Black is not just a bold version of Arial. Although similar, Arial Black has a different look than the bold version of Arial:
Arial, bold
Arial Black
You should use a fallback font for all fonts that you use, so that the browser knows what to use if that specific font isn't available, however it's tricky to use a font that is bold by default, as you can't specify Arial bold as fallback for Arial Black. You would have to make do with using Arial as fallback:
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
You could use a #font-face rule to force Arial Black whenever the bold font-weight of Arial is used:
#font-face {
font-family: Arial;
/* You can add other common names using comma-separated local definitions here */
src: local('Arial Black');
font-weight: bold;
}
#font-face {
font-family: Arial;
src: local('Arial');
font-weight: normal;
}
Now, whenever Arial is set as the font for an element and the calculated font weight is bold (which is what user agents set for the string tag in their html.css definitions), Arial Black is used instead.
strong tag basically creates your text in bold. For your case it makes no difference. But it will create a difference if your font is different and you are using "strong"
I'm writing a webpage where I want to use one font for normal text and another for code, so I have the following CSS:
body {
font-family:Verdana, sans-serif;
font-size:100%;
}
code, pre {
font-family:Consolas, monospace;
}
This works except that the Consolas text comes out considerably smaller than the Verdana text. I can sort of fix it by adding font-size:1.2em; to the code, pre settings, but that feels like a hack, particularly since the number isn't derived from anything other than trial and error.
Is this something that happens to be a quirk of the particular fonts involved, or am I doing something wrong?
Alas this is because Consolas has a smaller x-height than Verdana. You can indeed "sort of fix it" by using a larger font size, but if the user doesn't have Consolas the page will fall back to the default monospace font, which will appear too large.
The proper solution lies in CSS3's font-size-adjust. Alas it isn't very well supported at all; as far as I know then only mainstream browser to support it is Firefox.
When you define a font-size in CSS, what you're doing is defining a concept known as an "em square" or "em box" even if you aren't using em units.
The em square gets its name because in the days of metal press printing, each letter was put in its own metal "box" and in traditional typefaces the uppercase Latin M typically filled the width of an entire box, defining the sizes for the entire family. Hence, the em box. Although the original em box was defined by the width of the M, the em unit itself refers to the maximum allowable height of a character. This was just a result of the box created for the uppercase M.
In short, all of the letters in a font family need to fit inside the em box, but they don't have to take up the whole thing. So when you set an em box with a given width, all you are doing is defining the maximum allowable space for the lettering to be placed in. From there, the typeface designer's choices in kerning, geometry, ratios, etc. will determine just how much of that box their lettering will take up. This is why you are having to use two different font sizes to make the lettering appear to be the same.
The font sizes are the same. But in Verdana, characters are generally taller than in most fonts (in the same size). For example, “H” in Verdana is taller than “H” in Consolas. This is a font design issue.
The solution is to use matching fonts. If you really want to use Verdana for copy text, Lucida Console is probably the best choice for a monospace font. If you want to use Consolas as monospace font (fine!), then use another “C font” for copy text, such as Cambria (serif font) or Calibri or Candara (sans-serif fonts).
Although the font sizes are the same here (on browsers that I tested), it is best to make sure of it, since browsers often apply something like font-size: 90% on code and pre and some other elements. The conditions for this to happen are somewhat obscure, and explicitly setting font family to something else than the generic monospace seems to prevent that on modern browsers. But it’s still a useful precaution to set
pre, code, samp, kbd, tt { font-size: 100%; }
The first line is in Verdana and the second is Consolas. Both 12pt. Consolas is slightly shorter, but not so much as in 20% difference. Check the parent elements of your pre, since em font sizes are cummulative - e.g. if body is 0.9em and pre is 0.9em, the result would be 12pt * 0.9 * 0.9 = 9.72pt
If you are trying to match only the height but ignoring the width, then 1.16em looks about right, and it is really the quirk of the font and you are not doing anything wrong.
Edit
Looks like you are doing nothing wrong =) Left is from fiddler, right is from WordPad
I have Font Verdana + Bold + 16pt + Stong in PSD
So In html Conversion,
we have Font-family: Verdana + Font-weight:bold + Font-Size:16pt + What for Strong ? (strong html tag is not working for this )
there are 5 Font Styles there in PSD
Sharp , Crisp, Strong , Smooth ,None
so I don’t know how to make Font Strong, Smooth, Sharp etc
How can i resolve this issue in all browsers (old + new).
Thanks.
Sharp, Crisp, Strong, and Smooth are special font effects that affect how Photoshop renders anti-aliased text. There is no equivalent in CSS as far as I know.
What you can try is using CSS effects to scale/transform the text yourself but you will probably have to that for every letter of the text individually, possibly for each browser, certainly for each OS (because the same font is rendered differently in Windows, Mac and Linux).
If this matters to you, the usual approach is to replace the text with a background image using Fahrner Image Replacement (FIR). This shows the text as a fallback or the image with your nicely anti-aliased font.
Check the below links. CSS3 property
http://webdesign.about.com/od/examples/l/bl_fontsmooth.htm
http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
http://www.usabilitypost.com/2010/08/26/font-smoothing/
http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/ might help solve the issue of text looking a bit less crisp in older Internet Explorers.
As for having a bit more control over the font presentation - light, bold, medium etc I would recommend choosing a nice readable serif or san serif font from www.fontsquirrel.com, most font families will come with a variety of weights that you can play with - run up some spans for different weights.