Avoid oversizing the header
Design header height with usability in mind. On touchscreen devices, ensure all tappable elements are at least 44x44 pixels (1x1 cm) for easy pressing without errors. Text should be around 16 pixels for readability on small screens, though this may vary slightly with font style. Keep the header compact without compromising its look and feel.
On desktops, avoid an oversized header. Start with text sizes that are easy to read, then design the header to be just large enough to include necessary elements without excessive empty space. This keeps the header functional and aesthetically pleasing without wasting screen space or making the logo too large.[[1]]
References
- Sticky Headers: 5 Ways to Make Them Better | Nielsen Norman Group
Topics
From Lesson
Intro to Headers in UI