16

What font size works best for the website header?

23 days ago from , Founder and CEO of Flawless App. Designer + Developer

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., 14 days 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, 15 days 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
  • Elis Lilo, 15 days ago

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

    2 points
  • koushik c, 14 days 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 Sulajman, 13 days 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
  • R. KamushkenR. Kamushken, 12 days ago

    Fontpreview IMHO, Montserrat requires some fixes because by default the letter-spacing is too much. Right now I am working on free typeface system for Figma, here's quick peak from it, so you're free to pick the spec up https://www.figma.com/file/FpiCVg5eO2tDvfYEgA5jQGee/Montserrat-Tweaks?node-id=1%3A7

    1 point
  • Ryan Hicks, 14 days ago

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

    0 points
  • Surjith S MSurjith S M, 5 days ago

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

    Image

    0 points
  • Diego LafuenteDiego Lafuente, 3 days 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