Grow your CSS skills. Land your dream job.

How to justify h1?

  • # October 15, 2012 at 12:11 pm

    Hi.

    I’m having problems justifying h1 text in a 940px div for a site I’m working on.

    The Best Studio
    Awesome Artists
    Black Bird Tattoo

    I applied text-align justify but it had no effect. I want all three lines completely justified. Would appreciate any advice here.

    Thanks.

    :)

    # October 15, 2012 at 12:26 pm

    So you actually have three separate lines of text inside an H1?

    What are you expecting ‘justify’ to do…it can’t stretch text after all?

    # October 15, 2012 at 12:29 pm

    I’m trying to layout the text like http://simpleasmilk.co.uk/. I have tried playing around with the markup & CSS but still can’t get it to do what I want. Do you have any suggestions?

    # October 15, 2012 at 12:32 pm

    If you look at their markup they put each letter in a span…very heavy codewise.

    My advice would be to put three separate headings inside an ‘hgroup’. Give each of the headings a class and style them all independently.

    # October 15, 2012 at 12:36 pm

    They’re using lettering.js which puts each character into a span. This is your best option.

    # October 15, 2012 at 5:50 pm

    This should do what you are after: http://www.zachleat.com/bigtext/demo/

    It’s very similar to lettering.js, but won’t require you to manually adjust each glyph.

    # October 16, 2012 at 5:02 pm

    Thanks for the responses … Much appreciated. Is there no way to do this using CSS alone and avoiding JS?

    # October 16, 2012 at 6:02 pm

    I’m not sure if you looked at the link I posted, but the output code is just CSS.

    # October 16, 2012 at 6:04 pm

    Hi Josh, I can’t get it to work, I don’t even see what the problem could be? I have set the width to 620px in Big Text, copied the source, pasted and nothing … :(

    # October 16, 2012 at 6:05 pm

    You could always try giving each line that you want justified a class such as

    , then do a middle and bottom class and adjust the letter spacing and the word spacing until it looks how you want. Here’s a very simple example http://codepen.io/anon/full/fnCkL. Hope this kind of helps.

    # October 16, 2012 at 6:11 pm

    Thanks J,

    Without playing around with letter spacing etc … And just focusing on 1 line of text. Is there a method which will ‘span/stretch/justify’ a headline to a specific width. So I want 1 headline to span 620px for instance?

    # October 16, 2012 at 6:35 pm

    Not to my knowledge….sorry.

    # October 16, 2012 at 7:58 pm

    If that’s the case, you are best using a jQuery plugin like http://fittextjs.com/ and applying it to each line.

    # October 17, 2012 at 12:47 am

    @joshuanhibbert that BigText Wizard thing is pretty cool. If you don’t have dynamic text, it’s perfect!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".