I am using Chrome on Windows 7. The menu bar on the top of the page cuts off the title and the bottom of the page slightly cuts off the * FOR PEOPLE WHO MAKE WEBSITES.
It's intentional. I can't say I care for it - I've tried to scroll the missing part of the type onto the screen a couple times now.
You can fix this pretty easily if you use a browser extension like Stylebot to customize your page styling - it's great when something just annoys you aesthetically.
Here's my first pass at a correction that seems to work with the main pages, although I'm sure I'm missing something somewhere:
Adding this css changed my whole impression of the site. (I just inserted at the top w/ firebug, had to add !important to the .deadly-subtitle styles.)
Usually a magazine overlays its title with a very dramatic photo of a person, which makes the person stand out. And usually only a few letters are obscured. Our brains are quite good at filling in the details.
I'm a lot less impressed by a fricking navigational toolbar that obscures the top of every letter of the logo. What remains are the less recognizable bottom halves of the letters. The T and I (not shown, but also F) look identical for instance. I'll believe that this is intentional, but I think it looks horrible.
That's because a magazine is printed and its appearance doesn't vary between people looking at it, so we automatically assume that it's supposed to look the way it does. A website can look differently depending on which browser is rendering it.
I see your point, but my Web browser is also an interface, and the way the top cuts the header off makes it look as if there is a rendering problem.
It feels to me a bit like a glossy magazine printed on good quality stock having a cover with a crease in it by design. Most would just assume they got a creased copy until the saw the others.
Pretty sure it is intended. I refreshed a few times thinking that some stylesheets were missing or not loading properly. Definitely a bold direction...
edit: ahh for me the stylish add-on helps. Add padding-top: 150px to .main-wrapper and padding-top: 75px to .killer-logo. Apologies to the designers, but it was really, really bothering me.
You can fix this pretty easily if you use a browser extension like Stylebot to customize your page styling - it's great when something just annoys you aesthetically.
Here's my first pass at a correction that seems to work with the main pages, although I'm sure I'm missing something somewhere:
.home-page .killer-logo { top: 40px; overflow: visible; }
.killer-logo { top: 82px; overflow: visible; }
.home-page .wide-hero, .issue-page .wide-hero { padding-top: 136px; }
.wide-hero { padding-top: 98px; }
.global-footer { padding-bottom: 100px; }
.deadly-subtitle { bottom: 10px; height: 60px; }
.global-footer .inline-items { margin-bottom: 2px; }
.main-wrapper.stacker:first-of-type { margin-top: 198px; }
.single-column-display, .two-column-display, .multi-column-display { margin-top: 198px; }