CODEWITHSUNDEEP
htmlcss
Sergeen
Sergeen

Reputation: 97

Mixed size CSS text in different lines

I need to do this, using CSS (the one in the left is the intended design the one on the right is the actual output)

enter image description here

Now I'm trying to make this using this markup

        <div class="layout__in-block">
            <h2 id="title__two" class="presentation__big-titles">
                <span>great</span>
                <br/>
                <span>experiences</span>
                <br/>
                <span>for users</span>
            </h2>
        </div>

And then, using something like this in the CSS I style the text

#title__two > span:nth-child(1) {
    font-size: 117px;
}

#title__two > span:nth-child(3) {
    font-size: 56px;
}

#title__two > span:nth-child(5) {
    font-size: 73px;
}

But the problem is that the <br/> and the separated elements inside the each <span> are hard to control.

Any suggestion on how to solve this? Any other suggestion about the code is welcomed.

Upvotes: 1

Views: 162

Answers (4)

Asons
Asons

Reputation: 87303

Change your spans to divs and drop the br tag.

As both span and div has no specific semantics of its own, divs are block-level and spans are inline.

Block-level : display: block;, inline : display: inline

The distance between the lines and letters is adjusted using line-height and letter-spacing.

#title__two {
    font-family: sans-serif;
    text-transform: uppercase;
    line-height: 0.85;
}

#title__two > div:nth-child(1) {
    color: red;
    font-size: 50px;
    letter-spacing: 14px;
}

#title__two > div:nth-child(2) {
    color: blue;
    font-size: 30px;
    letter-spacing: 2px;
}

#title__two > div:nth-child(3) {
    color: green;
    font-size: 40px;
}
<div class="layout__in-block">
  <h2 id="title__two" class="presentation__big-titles">
    <div>great</div>
    <div>experiences</div>
    <div>for users</div>
  </h2>
</div>

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46629

For the differences in line height, may I suggest using a small font size for the h2 and line-height:1ex for the spans.

And if you don't want to worry about the number of <br>s, first target all the spans with just span and follow that with a :first-child and then a :last-child with specifics for those two spans. Then it won't matter if there are <br>s or not.

#title__two {
  font: bold 12px 'Arial Narrow';
  font-variant: small-caps;
}
#title__two > span {
  font-size: 60px;
  line-height:1ex;
}
#title__two > span:first-child {
  font-size: 125px;
}
#title__two > span:last-child {
  font-size: 73px;
}
<div class="layout__in-block">
  <h2 id="title__two" class="presentation__big-titles">
    <span>great</span>
    <br/>
    <span>experiences</span>
    <br/>
    <span>for users</span>
  </h2>
</div>

Upvotes: 1

jcuenod
jcuenod

Reputation: 58455

To achieve the end effect you're after, you'll probably want to do something a little more dynamic. There are some great js solutions for doing this. Take a look at:

Upvotes: 0

Thomas Landauer
Thomas Landauer

Reputation: 8355

Sure! Get rid of the <br>'s and declare this CSS:

span { display:block; }

Upvotes: 1

Related Questions