15

What font size works best for the website header?

almost 5 years ago from , Designer + Developer + Harmonica Player, Make of crosspatch.io

We see the header text first. It forms an initial impression and defines if the person is interested (scroll more or close the tab). I would be great to win user's attention :)

I defined new text for the header, but I'm struggling with the size, font & spacing for header and secondary test. What do you think will work better?

I made screenshots of different combinations:

P.S.: I’m working on a side-project to leave feedback on implemented design for iOS apps. The tool will stream real app from iPhone to Mac, allowing annotate screenshots with UI fixes. Now I'm in the design improvement stage + developing the tool.

16 comments

  • Clarissa H., almost 5 years ago

    I like the current version best. I definitely think it should be on one line, so I don't like the "very big version". I think the thinner font-weight isn't as a clear enough hierarchy. The "bigger font and padding" I think has too much padding, though it's a bit hard to tell since the red arrows and cropped screenshot distort my vantage point.

    8 points
  • Parker Hutchinson, almost 5 years ago

    what about something like this

    header

    the layout felt like there was a huge gap in white space underneath the headline copy. centering vertically and adding in that yellow to the top helps bring out the hero as an intro area.

    6 points
  • koushik c, almost 5 years ago

    I dont think the problem here is the size of the font imo (current version is just fine) the color combination for one just doesn't seem to be working for me. The yellow is too light against the light gray background, the dark text isn't really working well in combination with the yellow and the blue button seems a bit out of place. I don't think that yellow should be your primary/differentiating color; especially against that light gray bg.

    2 points
    • Ahmed Sulaiman, almost 5 years ago

      Thanks for your thoughts! I'm actually thinking to change the light gray picture to the video. The video\gif\animation should be in a contrast color. Don't know how it will play out.

      and the blue button seems a bit out of place

      previously, the button was yellow as well. With next iteration of landing, I will sit with my freelance designers and think about better color scheme

      0 points
  • Elis Lilo, almost 5 years ago

    oh, definitely not the last one. Also, the font looks weird. Which one did you use?

    2 points
  • Vanessa Bond, 9 months ago

    As the professional writer and academic proofreader that mainly specialized on preparation on scholarship papers that you can find here - https://order-essays.com/article/scholarship-essays/ I wanna note that fonts matter a lot. In my profession and academic writing I know that it should be strict formatted rules. Personally I think that current version is the best.

    0 points
  • Diego LafuenteDiego Lafuente, almost 5 years ago

    First question: are you using a grid? Second question, is your grid only columns (h rhythm)? Third question: if you aren't using grids for both horizontal and vertical, what are you waiting for?

    0 points
  • Surjith S MSurjith S M, almost 5 years ago

    I just changed the font and vertically aligned. It look much better now.

    Image

    0 points
  • Ryan Hicks, almost 5 years ago

    Header text? Your examples are not apart of the header. That's headline text—an H1.

    0 points