CSS first-letter formatting reducing gap between first and second character

Question

I am using the following css :

p::first-letter {
    font-size: 400%;
    line-height: 0;
}

I want to reduce the gap between the first and the second character. For example in this website I want to reduce the space between 'T' and 'h' in the first word 'Thakur'.

score 5 · Accepted Answer · edited Oct 17 '16 at 10:58

5

p::first-letter {
    letter-spacing: -8px;
}

edited Oct 17 '16 at 10:58

Mr_Green

40,727
45
159
271

answered Oct 17 '16 at 10:58

parag parmar

148
6

I would use this approach. – Fergal Andrews Oct 17 '16 at 11:00

geeksal · Answer 2 · 2016-10-17T14:12:49.180

You can give negative right margin:

p:first-letter{
  font-size: 400%;
  line-height: 0;
  margin-right:-2%;
}

<p>Thakur</p>

You can give margin either in percentage or pixel. You can also use letter-spacing property as recommended by @parag-parmmar but it is better to give value in % because your font-size is relative. Refer this post to know more about letter-spacing. You have given font-size in percentage. But, I would recommend you to look at rem units for font sizing. Have a look at this wonderful post.

score 2 · Answer 3 · answered Oct 17 '16 at 10:59

Use negative values for margin-right:

p::first-letter {
  margin-right: -5px;
}

body, p, div, h1, h2, h3, h4, h5, h6, h7 {
  font-family: Cambria;
  font-size: 20px;
}

body {
  padding: 25px;
}
p {
  margin: 0 0 10px;
}

p::first-letter {
  display: inline-block;
  margin: 0 -6px 0 0;
  font-size: 300%;
  line-height: 0;
}

<p>Thakur Anukulchandra was a highly accomplished spiritual teacher and the ideal of Netaji Subhash Chandra Bose. He was a very outspoken person yet extremly polite. He contributed more than 80 books on various subjects and many people have written biographies on Him, yet less is knows about Him. Ray A Hauserman, a US vetran of World War II became His disciple and later went on writing few books on Him. Eminent Indians like Deshbandhu Chittaranjan Das, Mahatma Gandhi, Lal Bahadur Shashtri, Shyama Prasad Mukherjee came to meet Thakur to acquire His blessings. People from different parts of the world and different walks of life like scientists, scholars, doctors, lawers, educationalists came to seek wisdom. Continue...</p>

score 1 · Answer 4 · answered Oct 17 '16 at 10:59

Use a negative margin on p::first-letter. The value will depend on your specific circumstances.

p {
  font-family: "Times"
}
p::first-letter {
  font-size: 400%;
  line-height: .25em;
}
p.dropcap::first-letter {
  margin-right: -.125em;
  color:red;
}

<p class="dropcap">Torem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius sapiente distinctio et, inventore voluptatum necessitatibus perspiciatis, dignissimos cumque, doloribus beatae aliquid deleniti at dolorum. Sunt soluta quae totam eligendi cumque consectetur
  ipsam, iste mollitia.</p>

<p>Torem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius sapiente distinctio et, inventore voluptatum necessitatibus perspiciatis, dignissimos cumque, doloribus beatae aliquid deleniti at dolorum. Sunt soluta quae totam eligendi cumque consectetur
  ipsam, iste mollitia.</p>

score 0 · Answer 5 · answered Oct 17 '16 at 10:55

0

Try This margin: -5px;

p.prophet::first-letter {
    margin: -5px;
    font-size: 400%;
    line-height: 0;

}

answered Oct 17 '16 at 10:55

Shrinivas Pai

7,491
4
29
56

CSS first-letter formatting reducing gap between first and second character

5 Answers5