Type-Inspired Interfaces

23 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. odd question. forgive / delete if u want

    Fantastic article. You are spot on. But I do have one question. When you wrote that the radius for corners should be a multiple of 2, why not say multiple of the largest base number 12? I only ask because I would think a multiple of two is to small a number. You could use 6, 12, 14, 18, etc. and I would think that the variances would be too small to notice drastically, but still not the same number so it may give an unbalanced feel? So this way I could go 13 and 26 and still get that nice rounded feel without being disjointed.

    And of course only I would pick up on numbers like that ( its just how I design ) But I was recommended this blog and from the articles I read so far it’s great for a seven year in the business new guy like myself. Let me know Thanks
  2. Hein Haraldson Berg

    Quite inspiring—I’m not designing much, but when I do, I tend to e.g. just tweak a more or less random border width till it feels right. Math is no bad idea at all, at least it can provide a better or more consistent starting point for that ‘tweaking and feeling’ process.

    I also like that you’re pointing out that an outer border’s radius should be greater than an inner’s—a lot of people seem to miss out on this particular detail, making it look weird and ugly.

  3. Rosalind Wills

    Great article; good to get the reminder about how much typography plays into the design process. Never really thought about picking fonts before working on the rest of the design, but I’ll have to give it a shot!

  4. Dan Mall

    @Anonymous first commenter: One thing I should have emphasized more is that you can use mathematics as a base, not a hard and fast rule. Think of my suggestion of multiples or Daniel’s suggestion of the golden ratio more as guidelines or starting points. Like a lot of graphic design, there are times where you’ll have to bend the “rules” a bit to get an element to feel right. Great question!

  5. Christopher Meeks

    Really excellent article Daniel. I appreciate articles like this way more than your standard “10 Best Web 2.0 Practices!”

    Up-and-coming designers need to know WHY to do something, not just HOW. The “Black & White” sample is really the clearest example of that. The type and the strokes just feel like brothers, they belong together.

    Wonderfully done.

  6. Will McClellan

    Amazing, some of these techniques are ingenious. I’ve used the ratios between font size and things like line-height before, but never thought about using the ratios within the characteristics of a typeface.

  7. Murtaza Chang

    A beautiful article and technique, I have never thought of that in this way, I am sure going to try it.
    Btw I cant seem to run 24ways on google chrome its damn too slow to scroll even though I have latest hardware but not so great GPU may be thats the issue :(

  8. Erik Ostrom

    @Anonymous first commenter – I was puzzled by this too, but I decided that when Dan said “a multiple of 2”, he didn’t mean just any multiple of 2, but “2 times the measurement you’re trying to relate to” – in this case, 2×12=24. I think that’s what you were getting at.

  9. Jason

    I like this angle, something I haven’t even thought of before. Coming from a Graphic Design background I’ll definitely be trying this out on some future web projects, thanks!

  10. Erik Wallace

    Good article. I love the fact that you mentioned the font, Brothers. I’ve been a fan of that font since a friend of mine was kind enough to introduce me to it.

Impress us

Be friendly / use Textile