Swedish character fonts overlapping sometimes - html

Question

I have div with the following style.
This issue is occuring only for the swedish characters. Not for the english.
.pricing-box {
text-align: center;
border: 1px solid #dfe8f1
}
.pricing-box .pricing-title,
.pricing-box .pricing-specs {
margin: -1px -1px 0
}
.pricing-box .pricing-title {
font-weight: normal;
padding: 15px
}
.pricing-box ul {
margin: 0;
padding: 0;
list-style: none
}
.pricing-box .pricing-specs {
padding: 10px 15px 20px
}
.pricing-box .pricing-specs span {
font-size: 50px
}
.pricing-box .pricing-specs span sup {
font-size: 30px;
margin-left: -20px;
padding-right: 5px
}
.pricing-box .pricing-specs i {
font-size: 14px;
font-style: normal;
display: block;
color: rgba(255, 255, 255, .6)
}
.pricing-box ul li {
font-size: 14px;
line-height: 48px;
height: 48px;
padding: 0 10px;
border-bottom: #eee solid 1px
}
.pricing-box ul li:nth-child(even) {
background: #fafafa
}
.pricing-table .pricing-box {
padding: 0
}
.pricing-table .pricing-box+.pricing-box {
border-width: 1px 1px 1px 0;
border-radius: 0
}
.pricing-table .pricing-box+.pricing-box:nth-child(2):last-child {
border-width: 1px 1px 1px
}
.pricing-table .pricing-box .pricing-title,
.pricing-table .pricing-box .pricing-specs {
margin: 0;
border-bottom: #eee solid 1px;
border-radius: 0
}
.pricing-table .pricing-box .pricing-specs span {
font-size: 40px
}
.pricing-table .pricing-box .pricing-specs span sup {
font-size: 20px;
margin-left: -10px;
padding-right: 5px
}
.pricing-table .pricing-box .pricing-specs i {
color: rgba(0, 0, 0, .5)
}
.pricing-table .pricing-best {
position: relative;
z-index: 15;
margin-right: -1px;
margin-left: -1px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}
.pricing-table .pricing-best .pricing-specs {
background: #fafafa
}
.pricing-table .pricing-best .pricing-title {
font-size: 28px;
line-height: 60px;
height: 90px;
margin: -25px -1px 0
}
.pricing-box-alt {
position: relative
}
.pricing-box-alt .col-md-3 {
padding: 0;
border: #c6c6c6 solid 1px;
border-width: 1px 1px 1px 0;
width: 26%;
text-align: center
}
.pricing-box-alt .plans-features {
width: 22%;
text-align: right;
border-color: transparent #c6c6c6 transparent transparent
}
.pricing-box-alt .plans-features .plan-header {
height: 170px
}
.pricing-box-alt .plans-features ul li {
border-left: #f0f0f0 solid 1px
}
.pricing-box-alt ul {
list-style: none;
margin: 0;
padding: 0
}
.pricing-box-alt .plan-header {
padding: 15px;
border-bottom: #f0f0f0 solid 1px
}
.pricing-box-alt .plan-header h4 {
margin: 0;
color: #f26b33;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
height: 40px;
line-height: 30px;
border-bottom: #f3f3f3 solid 1px
}
.pricing-box-alt .plan-header .plan-price {
font-size: 45px;
font-weight: 100;
height: 60px;
line-height: 65px;
margin: 0 0 5px
}
.pricing-box-alt .plan-header .plan-price small {
font-size: 30px;
opacity: .4;
padding-right: 3px
}
.pricing-box-alt .studio-plan .plan-header h4 {
color: #32cf4e
}
.pricing-box-alt .unlimited-plan .plan-header h4 {
color: #3792f2
}
.pricing-box-alt ul li {
height: 32px;
line-height: 32px;
padding: 0 10px;
border-bottom: #f0f0f0 solid 1px;
color: #0093d9;
font-size: 14px;
font-weight: bold
}
.pricing-box-alt .plans-features ul li {
color: #6f6f6f;
font-weight: normal
}
.pricing-box-alt ul li .feature-included,
.pricing-box-alt ul li .feature-excluded {
border-radius: 30px;
width: 12px;
height: 12px;
display: inline-block
}
.pricing-box-alt ul li .feature-excluded {
background: #e6e6e6
}
.pricing-box-alt .pricing-btn {
padding: 15px;
background: #fafafa
}
.pricing-box-alt .pricing-btn .btn {
padding: 15px 0;
font-weight: bold;
font-size: 16px;
box-sizing: initial;
display: block;
line-height: 1
}
.pricing-box-alt .pricing-btn .btn b {
opacity: .6;
display: block;
padding: 6px 0 0;
font-size: 13px;
font-weight: normal
}
.individual-plan .pricing-btn {
border-left: #c6c6c6 solid 1px;
margin-left: -1px
}
.pricing-box-alt ul li.header {
background: #f9f9f9;
text-transform: uppercase;
font-weight: bold;
text-align: right;
font-size: 12px;
color: #000
}
<div class="container">
<div class="row pricing-table mrg10A ">
<div class="row clear-both">
<div class="pricing-box col-sm-4">
<ul>
<li>
<p>Basic functions to plan and monitor your business</p>
</li>
<li>
<p>Create up to 40 of your won lists</p>
</li>
<li>
<p>Create up to 1 custom list</p>
</li>
<li>
<p>You can invite 5 to 10 users additionaly</p>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
Previously I had the same style. But the fonts are not overlapping. Now the fonts are overlapping. Here I have attached a image for reference.
After applied the following style, the fonts are not overlapping. What will be the reason for this issue?