Menu
using standard fontsquirrel based @font-face mark up.. the font is rendering on the thick side. below is a screenshot demonstrating the font in a few different ways. top is photoshop's render, second is chrome's render of the same font (obviously much thicker), and third is chrome's render of a similar font, which is also rendering kind of chunky.
http://cl.ly/0e3b2t1N0U2e003h322O
Tried using font-weight:lighter with no avail.. is there any trick to lighten it up?
thanks!
538
400 – Normal. 500 – Medium. 600 – Semi Bold (Demi Bold) 700 – Bold.
Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900).
You can use smaller font size and make it taller via CSS transform property: font-size: 1.5em; transform: scale(1, 1.5);
Parameter: The @font-face rule accepts four-parameter as described below: font-family: It specifies the font of an element. src: It is used to specify the location (URL) of the external resource ie., it holds the file path (url). font-stretch: It is used to set the text wider or narrower.
added a few things to the h1 markup (where the fontface rule was applied).
font-weight:normal; fixed a weird doubling thing that happened in iOS
-webkit-font-smoothing: antialiased; handled the thick render
153
In addition to the above, I had an issue with a Font Squirrel created font kit and noticed the rendering a little bolder than I initially had seen too.
Sometimes the default font weight for headers (h1, h2, etc) in the user agent (browser) is set to 800. If you use a CSS reset, they often fix the default to something around 500 or 400.
Read the following article for more information:
http://css-tricks.com/watch-your-font-weight/
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
