HTML・CSS Writing 2022

letter-spacing --Set character spacing --Introduction to CSS [CSS3 compatible]

To set the character spacing , specify "letter-spacing" in the style sheet (CSS).

<div> Character spacing 0px </div>
<div style = "letter-spacing: 1px;"> Character spacing 1px </div>
<div style = "letter-spacing: 2px;"> Character spacing 2px </div>
<div style = "letter-spacing: 3px;"> Character spacing 3px </div>

Effect of widening character spacing

The effect of widening the character spacing is that the spacing opens horizontally, which increases the area of ​​the character area. In other words, the part with the wider character spacing is more noticeable than the one with the smaller character spacing.

Character spacing , Font size, Bold, Color You can create a good contrast by combining the darkness of.

<div style = "font-size: 16px; color: # 333;"> Character spacing: 0px Font size: 16px Color: # 333 </div>

<div style = "font-size: 22px; color: # 111; letter-spacing: 1px; font-weight: bold;"> Character spacing: 1px Font size: 22px Color: # 111 Bold </div>

<div style = "font-size: 28px; color: # 000; letter-spacing: 3px; font-weight: bold;"> Character spacing: 3px Font size: 26px Color: # 000 Bold </div>