30 Responses to “8 Examples of Logos Using Only CSS”

1. Dennison Uy - Graphic Designer Says:
   January 31st, 2008 at 1:08 pm

   It doesn’t look bad. It even looks slightly good with anti-aliasing turned on. But … but … but … why go through the task of aligning and re-aligning your CSS to make it look good when you can achieve the same effect with a basic image editor in less than a minute?! And with images you can be sure it is anti-aliased too!

2. Patrick Burt Says:
   January 31st, 2008 at 1:46 pm

   Hi Dennison. Thanks for the comment! These are, in part, a result of me looking at so many blogs who had wordmarks typeset in a single font. It lead me to believe that they don’t have the knowledge or know-how to create images. (Ever see a logo JPG with 50 quality, byeruk). I figured I’d do my part to help. In terms of SEO, text is superior to imagery in terms of importance as well.

3. Mauro Says:
   April 16th, 2008 at 6:41 pm

   I have been looking for a way to do this, as I want to make a logo in text so the site searches better but when I try to use the code you display, it doesn’t work. Do I need the actuall css file?

4. Patrick Burt Says:
   April 16th, 2008 at 6:49 pm

   Hi Mauro,

   For some reason, it appears WordPress converts the double quotes to curly quotes, which will not display properly at all. All you need to do is change them all to straight quotes. No stylesheet required.

5. Mauro Says:
   April 16th, 2008 at 7:17 pm

   Patrcik, thanks for your speedy reply. 8 minutes is the probably the record for a trackback reply. Fixed the curly quotes. Ta-Da! It worked. I have been scouring the web for a way to change the font-weight for a First and last name on one line and your little demo has been very helpful. The thickness of a font is supposed to change by assigning a numerical value (font-weight 200;) but it doesn’t seem to work at least in IE7 — normal and bold, without the color, doesn’t seem to do very much.

6. Patrick Burt Says:
   April 16th, 2008 at 7:21 pm

   My pleasure. This one will take 13 minute. Good to see it worked. I’m not sure if the font-weight is well supported, especially in non anti-aliased departments. Is it possible the font is too small? I know on some browsers that Arial at 9 and 10 point will display the same for bold and normal.

7. CSS > Flattened Images.. Says:
   August 10th, 2008 at 11:20 am

   [...] No Image CSS logo design This entry was posted in Graphic Design, css. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL. « Search Ranking Fluctuations [...]

8. JithOnline Says:
   August 10th, 2008 at 12:37 pm

   I was trying to make a logo in text but when I try to use the code same which displayed above doesn’t work humm at last I got the answer here thanks ‘Patrick Burt’

9. James Says:
   August 13th, 2008 at 6:02 am

   Very interesting ! Some of them really look good. Stumbled !

10. Lora Says:
    August 13th, 2008 at 4:13 pm

    A worthy article! Thanks for the wonderful demonstrations and for the accompanying code.

11. AzAkers Says:
    August 13th, 2008 at 11:40 pm

    I dig it! I had a funny idea to have no logo on my old logo blog – so I used CSS only. Check it out at http://www.logofu.com

12. Yannis Says:
    August 17th, 2008 at 9:26 am

    Very nice use of CSS. No need of using image size.. “I Like It!”

13. abeen Says:
    August 19th, 2008 at 2:26 am

    That was very informative.

    – abeen

14. Calgary Web Design Says:
    August 19th, 2008 at 11:27 am

    Neat! I always have enjoyed these. Thanks for the article.

15. Dallas McLaughlin's Extravagantly Self Accumulated Design Link Roundup | Dallas McLaughlin Says:
    March 15th, 2009 at 2:18 pm

    [...] 8 Examples of Logos Using Only CSS [...]

16. Web Tut Says:
    March 24th, 2009 at 12:31 pm

    Nice idea, also in response to someone who mentioned it being easier to make in an image doing it this way is much better for SEO purposes.

17. Joker Says:
    March 26th, 2009 at 6:31 pm

    Yes, I can imagine a cooperation going for this technique hmm. Very professional indeed!

18. Michael Barrick Says:
    March 26th, 2009 at 10:54 pm

    Technically these are word-marks, not logos.

19. Nick Yeoman Says:
    June 8th, 2009 at 8:39 pm

    Hey Pat,

    I just stumbleUpon your post here. Your suggestion of using CSS to create a logo is great here is why:
    It’s cheap, It’s easy, Any printer can print the fonts, any computer read the fonts.

20. Patrick Burt Says:
    June 8th, 2009 at 9:03 pm

    Thanks Nick.

21. Phaoloo Says:
    July 7th, 2009 at 7:54 am

    Don’t know how CSS can do it until reading this post. Great, thanks for the list.

22. Isaac Says:
    July 7th, 2009 at 1:51 pm

    shaky at best, although the attempt at a true CSS logo is appreciated, I don’t think you are serious about this article – you know why? Becuase your own logo is an image (probably made in PS) see below for a snippet of code from this page.

    “

23. Isaac Says:
    July 7th, 2009 at 1:52 pm

    img align=”left” src=”http://www.pat-burt.com/images/patburt_logo.gif” alt=”Patrick Burt – A Blog for Web People” width=”219″ height=”105″ border=”0″

24. Patrick Burt Says:
    July 7th, 2009 at 1:53 pm

    @Isaac
    There’s a difference between having as much text as you possibly want because your SEO/business/marketing depends on it, and maintaining a brand (whilst already being at the top of search engine results)

25. Isaac Says:
    July 7th, 2009 at 2:04 pm

    @Patrick Burt

    Sure. But what does that have to do with an article being written about a CSS logo? Yeah you proved that it could be done, but the result is a poor one. Would you ever use this on your own blog site? I don’t think you would.

26. Patrick Burt Says:
    July 7th, 2009 at 2:34 pm

    @Isaac

    I can reach the top of SERPs with my targetted keywords: my name. And some people are stronger at CSS than Photoshop. I don’t know what you’re trying to prove here.

27. Isaac Says:
    July 7th, 2009 at 2:52 pm

    @Patrick

    My point is that CSS is not at the point in where it can produce a “logo”…yet, and any attempts (while interesting) result in a amateurish looking logo. I hope we can agree on this. Maybe it was the title of your article that threw me, but when i saw it I was expecting some creative use of CSS code that i haven’t heard of and maybe try out, but after observing it was just adjusting font, font sizes, color and positioning, i was a little let down.

    not to mention the first thing I saw on your site was the article title, then i immediately saw your own logo and I was genuinely impressed thinking you made that via CSS. Bottom line, i was expecting some out-of-this-world CSS based on some new CSS3 rules or something, and it was kind of a let down.

28. links for 2009-07-08 « Giri’s Blogmarks Says:
    July 8th, 2009 at 2:06 pm

    [...] 8 Examples of Logos Using Only CSS (tags: css logo) [...]

29. Zrce Urlaub Says:
    February 12th, 2010 at 6:27 am

    thats cool. thx. now the logo content will be cached by the search engines too.

30. Juegos Says:
    April 28th, 2010 at 6:51 am

    Excellent examples, beautiful and most important, SEO friendly.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Subscribe to Comments via Email