Css font size spacing

letter-spacing

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

Try it

Syntax

/* Keyword value */ letter-spacing: normal; /* values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: revert; letter-spacing: revert-layer; letter-spacing: unset; 

Values

The normal letter spacing for the current font. Unlike a value of 0 , this keyword allows the user agent to alter the space between characters in order to justify text.

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

Accessibility concerns

A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

Internationalization concerns

Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.

Formal definition

Initial value	normal
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	yes
Computed value	an optimum value consisting of either an absolute length or the keyword normal
Animation type	a length

Источник

CSS Text Spacing

In this chapter you will learn about the following properties:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example

Line Height

The line-height property is used to specify the space between lines:

Example

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example

White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Is there a way to make css letter-spacing: 0.5 px?

I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I’ll use half a pixel so 0.5px, but it doesn’t work, I tried using em attributes, but didn’t achieve the task. So is there a way to make letter spacing half pixel (cross browser solution if possible)

You’re likely running into pixel-alignment issues with font-hinting; you’re probably shifting by half a pixel, but then the font rasterizer is re-aligning the text to pixel boundaries. The effects of 0.5px could reasonably vary from OS to OS and browser to browser.

Since this is top of Google results, to help fellow rookies out, fractional letter-spacing is supported by all major browsers, as of end of 2013.

6 Answers 6

This bug has been reported back in 2008 and is confirmed. So if someone feels like hacking into webkit that would make a lot of designers happy.

Looks like a patch finally landed in webkit! And Chrome/blink was fixed some time ago. So we will be able to use safely fractional letter-spacing really soon.

Sub-pixel letter spacing works fine on FF, but not on WebKit (at least on Windows). See this test case:
http://jsfiddle.net/fZYqL/2/

This test also shows that it is not the sub-pixel literal value that is a problem. Using fractional em values that result in less than 1px of letter-spacing are also not honored on Webkit, but work just as well on Firefox.

This bug has been fixed in Chromium and landed in Chrome 30. So fractional values are now supported by Firefox, Chrome and Opera.

Tested the example above (jsfiddle.net/fZYqL/2) on Chrome version 31.0.1650.48 which worked fine for me.

@Zach Re: fractional pixels. Although they do not exist physically, they are simulated digitally by transparencies and changes in colour. A good example are icons and the serifs of type. A close look at what appears to be a very thin line will quickly show that it is simulated by rendering the line with a lighter colour that fools the eye. So even when they do not exist, graphic software has dealt with fractional pixels properly since a long time. It is a shame that webkit browsers still don’t.

Re: fractional letter spacing. It can be specified and works fine in non-webkit browsers (kudos for IE for once). In webkit browsers letter spacing is rounded to the closest integer (I believe that it is rounded down). This rounding happens not only when the letter-spacing is specified directly as a fractional pixel but also when it is specified as a percentage or em value and the final calculation in pixels results into a fractional pixel. Very frustrating.

Источник

equal spacing between text of different size in CSS

I want the same spacing between each line despite different font sizes (i.e. the red arrows below should be equal). I can’t figure out how to do this with the CSS line-height property.

I guess it could be done without margin and rem if needed, lookout for my answer. let me know if it works.. thanks.. gud question by the way

6 Answers 6

I think the other answers are almost there, but line-height is a little different. The way I think about it is that line-height is the amount of space from the center of the letter. So if your line-height is 50px, there will be 25px space above the middle of the letter and 25px space below the middle of the letter. This makes the line 50px tall.

So to make the space between them even, I would use a margin-bottom and set the line-height to something that looks like it butts right up to the top and bottom of the letter (probably different depending on the font you use). In my example below, I set the line-height to .7 (you can see how it butts up to the letter’s actual baseline and top height with the red border. Then I gave a margin value with rem units so that it is relative to the original page font size, not the div itself with a unique font size.

Will it work for multi-line texts. meaning if I had to type B C D . Z and the second div gets two lines.. I fear the margin of 1rem is relative to the div and not the line.

Well if you want exact spacing between divs and lines, regardless of text size, you’ll need to do some calculation based on the understanding of how line height relates to the text, and there will be slight variation between fonts and how much vertical space they consume.

Источник