joshnh

What browser/OS? I can't replicate the issue you seem to be having.

I plan on having an option to output rem with px fallback code.

Only if you are using line-height to hack together a print baseline on the web.

Let me put it this way, if there was a semi-reasonable solution, I'm sure you would have heard about it.

Spot on. Perhaps I could have used a different term, but 'baseline' gives visitors an immediate sense of what the tool does.

The purpose is to mimic the effect of a print baseline by enforcing vertical rhythm, and while not perfect, it's often better than none at all.

Good call, I've fixed that.

Ems are more versatile. When increasing the size of all fonts at a particular breakpoint for instance. Instead of having to adjust each font-size property individually you can simply change the font-size of the root element.

Absolutely, you can hack it on a very individual basis, but this introduces some major problems. For instance, browsers and operating systems all render fonts differently, and as the web is fluid by nature, simply having a sentence break to the next line can be an issue. Also, it can be incredibly different based on the typefaces you are using.

Hi, creator here. Unfortunately that's not how CSS works. See here for more information: http://joshnh.com/2012/10/12/how-does-line-height-actually-w...

Am I the only one that simply imports hi-res photos into Instagram then?

The page shift can be fixed by using:

html { overflow-y: scroll; }

Would you mind sharing some more information on these 'elegant solutions'? I'm yet to experience them.

You could actually scale it if I had have used ems/rems instead of px. But you are right, an image is the way to go for production.

Spot on. I clearly state in the description field that it is only an experiment.

I am; Melbourne based. Thanks!

G'day, I'm the guy that made it. I agree with your comment completely, I had one pretty big constraint though; one element allowed. I'd like to think that is why it is getting upvoted.

Here is the image I used for reference: http://store.storeimages.cdn-apple.com/6442/as-images.apple....

I simply eyeballed an image rather than working to scale. As it is just an experiment, I'm not too fussed by the incorrect dimensions.

The thing to keep in mind is that the use of pseudo-elements keeps the style separate from the content. In terms of practicality, there isn't much; I did this as an experiment in semantics and the latest CSS properties and techniques.

For me, the best way to switch off, and the most rewarding, is to go cycling. Not only is it great for my health, but it is impossible to stay connected.

On the other hand, a designer that has no knowledge of HTML or CSS can open doors that you may have never considered, even if it involves more work.

I agree with you in the case of something original, but I'm not entirely sure how this qualifies?

I was merely curious as to the thought process. Thanks for offering some insight.

What would you then recommend when needing to support legacy browsers?

While I appreciate the time and effort that went into producing this, I must admit that I am a little confused; what is to be gained by recreating logos using only CSS?

There are only two answers that I can come up with: practice or showcasing new properties. In my opinion, both of those reasons don't justify recreating an image using CSS. Surely if you wanted to practice, or showcase a property, you would be better off creating something that could actually be used?

Please feel free to 'enlighten' me, as I have almost certainly overlooked something.

Very interesting concept, but I am worried that this encourages a copy/paste style of coding, rather than actually learning why you would do this or that.

I type in a strange fashion: I hover my fingers over the home keys, but never let them touch unless I am depressing a key, and I only use my pinkies for the shift and enter keys. I make surprisingly few mistakes, especially considering that I don't look at the keyboard when I am typing. I also feel that I am able to type as fast as someone who uses the correct technique.

I would suggest that you only use the Mavis Beacon method as a guide; you need to work out what you are comfortable with. Just because touch-typing is considered 'best practise' doesn't make it right for everybody.

I'm reasonably new to the world of design, and would love to get some honest feedback on my site: http://joshnh.com

My main focus has been readability; I want to make sure that that hasn't negatively impacted other aspects I may not have considered though.