Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make narrow characters with CSS

Tags:

css

width

fonts

How do I reduce characters' width of Arial-like fonts with CSS?

like image 549
Alex Avatar asked Jul 21 '09 19:07

Alex


People also ask

How do I make text narrower in CSS?

The font-stretch property allows you to make text narrower (condensed) or wider (expanded). Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to select a normal, condensed, or expanded font face.

How do I make text narrower in HTML?

The HTML <small> tag makes text one font size smaller in the HTML document. This tag is also commonly referred to as the <small> element.

How do I stretch a character in CSS?

You can use font-stretch to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.


2 Answers

You can't reduce character width, but you can reduce letter-spacing.

span {  letter-spacing: 0px; } 
like image 114
Mike Robinson Avatar answered Sep 30 '22 15:09

Mike Robinson


Use narrow fonts in your font-family declaration. These are pretty common.

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

like image 44
MM. Avatar answered Sep 30 '22 15:09

MM.