Geek Answers Handbook

Large font size, thin letters

Let's say I use font-size:30px; and font-family:Verdana; .

enter image description here

I need these letters to be large, but still thin, so I tried font-weight:lighter; .

But nothing changes, some fonts will become smaller, some of them will not be affected.

How to create large, but thin letters? Is there a way in CSS, or are these specific fonts?

+6
source share
6 answers

In order to achieve a thinner version of Verdana, due to the fact that the font does not support certain weights, you will have to place your own version of the font or use another font that is already placed to achieve your appearance.

Some fonts do not support lighter / heavier versions of themselves - if they do, they may not match the CSS numerical scale (as you indicated).

From here .

Because so many professional quality web fonts come in a variety of weights, it now makes sense to use a numerical scale than it was when we only had to deal with "normal (400) and" bold "(600). Typically, familys scales can be mapped to these values:

100: Ultra Light

200: Thin

300: light

400: Normal

500: bold

600: bold

700: Extra Bold

800: Heavy

900: Ultra Heavy

Pay attention to the keyword there: usually. Unfortunately, the reality is that many fonts simply do not fit this template, for example, when a family has many weights or where their own definitions do not necessarily correspond to the standard scale.

So, a short story, you will either have to place a “thinner” version of the font (the one you made / downloaded) or use a different font.

IMO Tahoma, Hedley or Geneva are similar fonts, however they are not available freely - you can look at Google fonts for some that both you and @minitech indicated.

+3
source

This is the closest I came up with.

 div{ font-family:Verdana; font-size:30px; font-weight:100; -webkit-text-stroke-color: rgb(255,255,255); -webkit-text-stroke-width: 1px; -webkit-font-smoothing: antialiased; }

Problems:
1. Works only with web browsers (Safari, Chrome)
2. If the background behind the text is not a solid color, then it will be seen that this is a text stroke.
http://jsfiddle.net/dru87/

+4
source

Select a thin font and apply bigtext.js / fittext.js or slabtext.js

+1
source

Not all fonts support all widths. If you are looking for nice thin fonts. You can see these thin google fonts . They are free and easy to implement.

+1
source

Using font-weight means requesting fonts with different weights (specific fonts) from the font family. The Verdana font family does not have a font that is lighter than usual, so you become normal. This applies to most fonts that you can usually use on web pages.

In Google Web Fonts , for example, you can find many font families with dash fonts that are lighter than usual, for example. The Sans Pro source has a weight of 200 and 300.

Note. Ease of font relative to font. What is light (200) in a font family can correspond to what is normal (400) in another font family.

0
source

Step1: Enable To Download Fonts From Google

https://fonts.googleapis.com/css?family=Lato:100italic 'rel =' stylesheet 'type =' text / css '> https://fonts.googleapis.com/css?family=Lato:100' rel = 'stylesheet' type = 'text / css'>

Step 2: add the following css .text properties {font-family: Lato, sans-serif;

font-weight: 100;

font-size: 7em; }

Done!

will definitely work

For more information, visit http://tobiasahlin.com/typesource/01-elements-of-html-and-css/

0
source

More articles:


All Articles