15 ms·
The Markdown Mark by Dustin Curtis
- est 15y agoNow imagine a fancy logo for HTM↑
- jacobr 15y agoFor README's :) _ _ | V | || |_v_| \/ MARKDOWN
- potch 15y agoHe's very particular about how this symbol should and shouldn't be displayed. Don't think that's a bad thing, but it's interesting.
- izak30 15y agoLike any good branding, it's particular.
- robbiemitchell 15y agoExactly. Logos, wordmarks, etc. come with strict standards for appropriate and inappropriate use.
- DHowett 15y agoI'd say he's almost too particular for an M with a down arrow in a rounded rectangle. However, what's the corner radius? What's the width of the stroke on the M? The depth of the point of the arrow or the width of its sweep? It seems like he's got the spacing and sizing of line-width elements specified to a 'T' (or an 'X' as the case may be), but can we typeset the M in, say, Times? Can the down arrow be a chevron instead? Particular, but if he's going for particular he's taking it nearly far enough. :P
- unwind 15y agoThanks, I was confused by the strange mix of very clear specs and no specs while referencing the absent specs, too. Bullet points 1 and 2, for instance: 1. Do not change the aspect ratio of the rounded box enclosure. 2. Do not change the border radius of the rounded box enclosure. Neither of these properties were defined as far as I could see. Perhaps it's one of those cases where you're expected to "see" it from the graphics; I typically don't operate well that way. :)
- adavies42 15y agoalso there's at least two more measurements missing from the spec graphic--the distance between the M and the arrow and the distance between the arrow and the right edge. i assume those are both X, but it doesn't actually say....
- mcav 15y agoThere's been some talk recently about somewhat ridiculous symbols representing attribution. Sometimes, a good icon or symbol works really well; other times less so. I think this is a nice idea and looks well-executed.
- obtu 15y agoI don't think a concise symbol is needed. A Markdown area, when activated, should have some sort of sidebar hint to give basic examples of the syntax, and that takes enough space that Markdown can be used as a word. Recognition might be speedier for the spelled-out word, too. Before the user decides to input something, advertising Markdown support isn't very important.
- _frog 15y agoThis would be really great as an addition to the icons that already ship with Twitter Bootstrap, something like that would really speed up the adoption of this as a standard.
- troels 15y agoThat's very nice. I do wonder if the downward pointing arrow might cause some confusion, since it could be misinterpreted as meaning "download".
- perlgeek 15y agoIf anybody else had trouble finding the license, it's at https://github.com/dcurtis/markdown-mark/blob/master/LICENSE https://github.com/dcurtis/markdown-mark/blob/master/LICENSE (as dcurtis has been kind enough to tell me on twitter).
- potch 15y agoTook a crack at making a CSS version: http://potch.me/markdown-mark.html http://potch.me/markdown-mark.html
- jacobolus 15y agoLooks like the TextMate 1 document icon for Markdown! :-) http://www.hcs.harvard.edu/~jrus/site/tm-icon-selection.png http://www.hcs.harvard.edu/~jrus/site/tm-icon-selection.png At some point several years ago, I was naming all my markdown files like foo.m↓, but after a while I decided that foo.mdown probably plays nicer w/ typical software. :-)
- cobychapple 15y agoFor anyone else that didn't know what this guy was talking about, its the middle icon on the bottom row.
- SeoxyS 15y agoIt's also similar to the solution I went with for the icon of my markdown editor, Macchiato: http://getmacchiato.com/ http://getmacchiato.com/
- MattBearman 15y agoI actually much prefer your logo, the arrow being part of the 'M' is (for me) more aseptically pleasing, too bad you didn't put yours forward as universal mark down symbol. Edit: Having said that, I think Dustin's is probably easier to understand without explanation.
- fudged 15y agoBeautiful app and site!
- gurraman 15y agoI saw this on Dribbble a few weeks ago: http://dribbble.com/shots/423934-This-Means-Markdown http://dribbble.com/shots/423934-This-Means-Markdown Another nice one: http://dribbble.com/shots/424152-Markdown http://dribbble.com/shots/424152-Markdown
- tzaman 15y agoThe second one is much nicer than Dustin's
- dcurtis 15y agoAt first glance, the second one might appear to be a better mark. However, if you don't know what it stands for, or that the top part of it is an M, the graphic is just an ordinary arrow. It doesn't accomplish the primary goal of the design. It definitely looks nice, though.
- nhebb 15y agoI didn't even notice that the top formed an M until you mentioned it, so there you go.
- nicpottier 15y agoGood logos don't beat you over the head with what they mean. The original version is pretty amateur in that respect IMO, it is almost the first thing anybody would come up with. Having a bit of delight and 'aha!' in a logo is a good thing.
- Mjux 15y agobringing in the meaning literally to the face. I would keep http://dribbble.com/ http://dribbble.com/ shots/423934-This-Means- Markdown Embedding the context doesn't help with the second one. encoding with the first one solves them. Dustin, how would this keep the context in application and web?
- cobychapple 15y agoIt's hard to get a clearer, simpler symbol than that, and it's the creation of an 'open' symbol like this that I predict will play a big role in driving adoption of the Markdown format on a wider scale than is seen today.
- ajhit406 15y agoI guess design things happen on dribbble before HN. http://dribbble.com/shots/423934-This-Means-Markdown http://dribbble.com/shots/423934-This-Means-Markdown
- ajhit406 15y agoPerhaps more interesting: http://dribbble.com/shots/423934-This-Means-Markdown/rebounds http://dribbble.com/shots/423934-This-Means-Markdown/rebound...
- dcurtis 15y agoIn fact, I only made this a more serious project because of the response I received on Dribbble.
- Mjux 15y agoProject looks really exciting, Dcurtis. My question is on the adoption on text based interfaces, like HN input. Using html entities … ... Html entities save a better explicit defination in web. Image rendering will get you there, building another context will definitely ease adoption. What do you think?
- vilius 15y ago"M" could stand for almost anything, and the bold style reminds me more of a "Metro is that way" than "Markdown below". On the other hand this one http://dribbble.com/shots/424394-Markdown http://dribbble.com/shots/424394-Markdown looks much more self-explaining.
- rplnt 15y agoI don't understand it as "Markdown bellow", but rather "M(ark) down".
- nicpottier 15y agoI like many of these much more than the submitted version in the original article. I wonder though, shouldn't any serious effort to do this try to get Gruber on board? He seems to have some design sense and declaring "this is the markdown logo" without his approval just seems a bit.. disrespectful?
- ms123 15y agoPerfect. What is there more to say, really? You made the world a little better today.
- chalst 15y agoI am having trouble with the specification: it is defined in terms of "the M glyph", but a glyph is not a graphic. Does the specification fix a particular font?
- dcurtis 15y agoThe M icon in the Markdown Mark was created out of a modified version of the M from Gill Sans Bold (you probably should not try to recreate the mark using Gill Sans because of the modifications to the crotch on the M).
- icebraining 15y agoI propose this unicode version:【M↓】(graphics aren't always appropriate)
- pronoiac 15y agoThose brackets render fine on Mobile Safari, but not on Firefox on my desktop.
- icebraining 15y agoIt's because your desktop system lacks an appropriate font. The GNU Unifont, which is GPL licensed, support all the basic unicode characters (that's 65,536 characters!) and can be downloaded from here: http://unifoundry.com/unifont.html http://unifoundry.com/unifont.html If you use Debian (and possibly in other Linux distros), you can just install the ttf-unifont package.
- masukomi 15y agoWhile this may be true, people can't be expected to go tracking down and installing a font just to see the characters that don't happen to be rendering in your site / app. Another solution is required, such as normal ascii brackets.
- icebraining 15y agoOr you can use webfonts. In any case, I agree, but the proper solution should be for OSs to come with fonts to cover that Unicode spectrum. It eliminates much of the utility of having Unicode in the first place if you can't safely use them.
- Someone 15y ago[pedantic^2]: They do not claim 65536 characters, but 65536 code points. That range contains room for 2K surrogate pairs, 6k or so of private use area, some control characters, and I think there still are some small unassigned regions (http://unicode.org/roadmaps/bmp/ http://unicode.org/roadmaps/bmp/). Another font with (I think) more or less equal character support is http://en.wikipedia.org/wiki/Code2000 http://en.wikipedia.org/wiki/Code2000
- jenius 15y agoAwesome idea, but this one is better: http://dribbble.com/shots/424152-Markdown http://dribbble.com/shots/424152-Markdown
- vilius 15y agoThe problem with this one is that once you make more general by removing embedded effect and make it black and white only, it does not look that good any more. Personally I like this one the most http://dribbble.com/shots/424394-Markdown http://dribbble.com/shots/424394-Markdown - as the dashes are really reminding me Markdown.
- ugh 15y agoIt just looks like an arrow pointing down. Seems to general to me.
- hxa7241 15y agoimproved: more M-ness to balance the arrow-ness and make it more distinctive, and -- more importantly -- made bolder to work at small sizes: https://plus.google.com/102359018718464872517/posts/LKJA5UuaBMm https://plus.google.com/102359018718464872517/posts/LKJA5Uua...
- reledi 15y agoI disagree. It's looks cool but it's too easy to confuse with a fancy down-pointing arrow. Unless you know you're looking for the 'M', you probably won't notice it.
- vilius 15y agoIf this is an icon for Markdown, then I suppose this must be an icon for Markup: http://cl.ly/1I0N0s2a0d3x0D1k0523 http://cl.ly/1I0N0s2a0d3x0D1k0523
- JBiserkov 15y ago:-D I guess all jokes eventually come around.
- antidaily 15y agoSerious question - do a lot of apps still use markdown? Haven't encountered it in a while.
- Steveism 15y agoI've noticed quite a few Mac and iOS apps using Markdown lately. If anything it seems to be gaining adoption. Of course this isn't based on any actual data just my own observations. Perhaps a Windows user can chime in and comment about it's growth from their perspective. I'd love to see it being used in more blog commenting systems.
- baddox 15y agoPerhaps not a lot, but certainly a few heavily-used apps and sites use something resembling Markdown. Namely, Github, HN, and reddit.
- Hemospectrum 15y agoThe original Perl script gets very little use, but the formatting conventions established by Markdown have become enormously popular the past few years, displacing older conventions like BBCode. Some implementations (like the one here on HN) support only a couple of features. It's more of an archetype than a proper standard.
- nchlswu 15y agoIs the "something using Markdown" Dustin's blogging engine? Anyways, it's great to see this come from concept (Dribble) to a detailed mark/brand. What other languages have their own mark?
- Kilimanjaro 15y agoA slight mod from Nicola Armellini's http://i.imgur.com/pQzzk.png http://i.imgur.com/pQzzk.png Thought it would look better like a button or badge.
- alanh 15y agoInteresting that we could see a unified Markdown mark long before we can ever hope to see a unified Markdown specification. (Most implementors feel Markdown could use some expansion — see MultiMarkDown, PHP Markdown Extra, Python Markdown — but Gruber is having none of it and stopped moderating the group, and no consensus has been reached about how to unify the various flavors, except that it can’t be done without significant time investment and a rough consensus.)
- adambyrtek 15y agoInterestingly, this resembles the Gmail logo to me.
- efsavage 15y agoIt feels like an action button, like I'm going to download something. Something like http://imgur.com/T2muH http://imgur.com/T2muH seems simpler (forgive the crude 2 minute execution)