I'm wondering if anyone has a smart js or css trick to make a small font a little bolder.
For a client, we're using the Courier font with font-size 12px/15px and text-transform uppercased. I added font-weight bolder to the text, but the text still isn't as bold as it is in the Photoshop design file.
Does anyone know any tricks to make a small font appear bolder?
My current CSS:
.block.project p {
font-family: "Courier New",Courier,monospace;
font-size: 12px;
line-height: 15px;
font-weight: bolder;
}
I tried do perform some tricks with text-shadow, but that doesn't give the satisfied effect.
Thanks in advance!
You could try a font-shadow using the same colour shadow as font colour.
One of the following might do it:
Add a blurred font shadow to each edge
text-shadow: 0px 0px 1px #000000;
Or add one pix to the vertical thickness of each letter
text-shadow: 0px 1px 0px #000000;
Or add one pix to the horizontal thickness of each letter
text-shadow: 1px 0px 0px #000000;
I think the 2nd of these would be my personal preference.
However, support is not guaranteed being CSS3 (although I believe this is one of the better supported features) and may detract from the readability.
Find a generator here
Try to set font-weight: 900; — it is the maximum value for font-weight.
If it is not help, try to increase font-size;.
Also, Photoshop and browsers are using different rendering models, that's why difference differences will always exist.
Related
http://www.alecos.it/new/125027/125027.php this link is an example of my problem... I used a png 1x16 for drawing the rows... the rows are visible in the link posted... my question is:
why under IE 6/8, FireFox, Opera, Safari and other browsers the rows are perfectly aligned with the text while under IE 9/10/11 the text do not fit in the rows?
I used a simple css:
/* Style Source Code */
.code {
border-radius: 7px;
border: #6666FF 1px solid;
background-color: #FFF5EE;
background-image: url("../bkg/Bkg_116.png"); /* Horizontal Rows */
background-repeat: repeat;
background-position: 0 10px;
}
/* Style Source Code */
.xcode {
color: #008000;
font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
/* Style Div */
.alignment {
line-height: 20px;
text-align: justify;
}
Hope in workround to fix the issue...
here there is my css: http://www.alecos.it/css/alecos.css
I'm not on Windows machine right now but my guess is .xcode(line-height:16px;} would solve your problem, but I must say that this is the wrong way of creating row borders. Why not add:
.xcode td{border-bottom:1px solid #ddd;}
instead of using background image?
Firefox is temporarily outdated unti it's next update meaning that it's browser does not have the ability to process codes in the same manner as other browsers.
.alignment {line-height: 20px;}
Gets over ruled by .xcode line-height normal;
IE aint normal ;)
Besides content tages like h1, p, font all have slightly different margins/paddings around them. So a non responsive img isnt the best way to go.
Would be better if you could wrap each line with a span, div or sinces its a table a tr,td and give those a border-bottom.
Gr.
Kevin
In order to make your text inside .xcode aligned with the horizontal lines, the "code" lines must be distributed vertically. Unfortunately, It seems that you did not understand the meaning of line-height property and use the default value without considerations.
The line-height property
As you can see, the line-height property will decide how much is the distance of two lines of text. In your case, we need it to be exactly 16px inside the whole block of .xcode.
The value of normal value of the line-height property
From the W3C CSS spec, the value of normal value is defined as:
Tells user agents to set the used value to a "reasonable" value based
on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
From some online resource like this article or this page, you can see that the real value of normal value depends on many arguments like font size, font family, OS, user agent, ... Therefore, it is recommended that you should use some css normalize stylesheet to set the value of line-height correctly and cross-browser.
About your case
The quick fix here is setting the line-height inside the .xcode class to be 16px (which is the height of the of your background image).
I'd like to make one of the FontAwesome icons a bit less heavy - it's much heavier than the font I am using. This how it looks presently:
:
Ugly, right? So I've tried resetting the font-weight as follows:
.tag .icon-remove {
font-weight: 100;
}
The attribute appears to be set correctly in the CSS, but it has no effect - the icon looks just as heavy as before. I've also tried font-weight: lighter and -webkit-text-stroke-width: 1px with no effect.
Is there any way I can make the icon less heavy? The docs say "Anything you can do with CSS font styles, you can do with Font Awesome" but I can't figure out how to do this.
Webkit browsers support the ability to add "stroke" to fonts. This bit of style makes fonts look thinner (assuming a white background):
-webkit-text-stroke: 2px white;
Example on codepen here: http://codepen.io/mackdoyle/pen/yrgEH
Some people are using SVG for a cross-platform "stroke" solution: http://codepen.io/CrocoDillon/pen/dGIsK
2018 Update
Font Awesome 5 now features light, regular and solid variants. The icon featured in this question has the following style under the different variants:
A modern answer to this question would be that different variants of the icon can be used to make the icon appear bolder or lighter. The only downside is that if you're already using solid you will have to fall back to the original answers here to make those bolder, and likewise if you're using light you'd have to do the same to make those lighter.
Font Awesome's How To Use documentation walks through how to use these variants.
Original Answer
Font Awesome makes use of the Private Use region of Unicode. For example, this .icon-remove you're using is added in using the ::before pseudo-selector, setting its content to \f00d ():
.icon-remove:before {
content: "\f00d";
}
Font Awesome does only come with one font-weight variant, however browsers will render this as they would render any font with only one variant. If you look closely, the normal font-weight isn't as bold as the bold font-weight. Unfortunately a normal font weight isn't what you're after.
What you can do however is change its colour to something less dark and reduce its font size to make it stand out a bit less. From your image, the "tags" text appears much lighter than the icon, so I'd suggest using something like:
.tag .icon-remove {
color:#888;
font-size:14px;
}
Here's a JSFiddle example, and here is further proof that this is definitely a font.
Just to help anyone coming to this page. This is an alternate if you are flexible with using some other icon library.
James is correct that you cannot change the font weight however if you are looking for more modern look for icons then you might consider ionicons
It has both ios and android versions for icons.
The author appears to have taken a freemium approach to the font library and provides Black Tie to give different weights to the Font-Awesome library.
Another solution I've used to create lighter fontawesome icons, similar to the webkit-text-stroke approach but more portable, is to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
.star-light::after {
content: "\f005";
font-family: "FontAwesome";
font-size: 3.2rem;
color: #fff;
font-weight: 900;
background-color: red;
}
I have the following CSS on my
h2 {
font-family: Arial, Verdana, sans-serif;
color: #fff;
text-shadow: 0 6px 0 #E5E5E5
}
The problem is that this looks good only on some font-sizes, in others it looks really bad. If the font is really big the shadow is barely noticeable, if the font is too small the shadow makes the text unreadable. In my webpage the font of this particular element changes sizes dynamically. It can be as small as 10px and as big as 200px.
For some reason setting the shadow position in % do not work, one would hope it would take a % of the font-size attribute.
So I'm asking here if there is any way to make text-shadow works on fonts that changes size using CSS alone. I'm hoping for a solution that doesn't use javascript.
You can use em instead of px in the text-shadow and em relates to the actual set size of the typeface.
Examples on w3.org
Understanding em
see
http://rcljr.com/rcl/tests/TextShadow%20Supreme/index.html
for a text shadow formatter
When I have the following in css, the underlines under the links in IE and Firefox are "doubled". I have seen that some websites have the same font-family, same font-size, in bold and underlines are not doubled. How can I make the underline only one line and not two (1px vs 2px). A simple css that would work in all browsers (if possible). I know I could use border-bottom to solve the problem but I don't really like the idea.
.a_12 {
font-family: arial;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
Thank you for your help and suggestions
You cannot control how browsers render their text underlines using CSS. If you really need that level of control, it doesn't hurt to use a bottom border.
try to use this property: border-width: 1px or play with border-bottom property
An alternative to the border-bottom technique suggested in several other posts is to use an inset box-shadow, like so:
box-shadow: 0 -1px 0 0 inset;
Leaving out the color parameter defaults to the text color.
I have some buttons my page using a custom font face using the CSS and files generated by the Font Squirrel generator.
When the font's colour is black, they display fine...
However, when I change the colour to something else, the text seems to have a smoothing that bleeds the characters into each other and generally makes the characters look too thick...
I've played around with font-smooth property and a few other things, but have been unable to get it to work...
I don't think it's too relevant but the CSS for these buttons are...
color: #FFFFFF;
display: block;
padding: 1em 0.3em;
position: relative;
text-decoration: none;
z-index: 10;
font-family: BebasNeueRegular,Arial,Sans-Serif;
font-size: 22px;
list-style: none outside none;
text-align: center;
text-transform: uppercase;
The background is a separate element.
How can I get the white text to appear like the black text?
(It may be hard to tell the difference between the two, but my boss insists it is there.)
This worked for me:
-webkit-font-smoothing: antialiased;
Part of the problem is that it's not a particularly well-made font. I concur with #thirtydot's suggestion of text-shadow. A 1px black-on-black text-shadow should thin the font out. Any browser that doesn't support text-shadow will be rendering the font horribly anyway.
And remember that some html elements has bold as default, like h1, h2... When I use font squirrel to generate a font and use it with h1, for example, I always put:
font-weight: normal;