Grow your CSS skills. Land your dream job.

New Poll: What’s Your Favorite Page Title Separator?

Published by Chris Coyier

Just for silly kicks, let's keep on with the page title polls, this time with perhaps the most trivial of all choices. The poll is embedded on the site in the sidebar. Let everyone know what your favorite page title separator is. The en-dash? The vertical pipe? THE DOUBLE COLON‽

Comments

  1. Permalink to comment#

    dot (.) or slash (/)

  2. What about `»` and `«` ?

    They’re purty.

  3. Permalink to comment#

    At the current I tend to like a simple “-”. Short, Sweet, to the Point.

  4. Giannhs
    Permalink to comment#

    I want to be the person my mother always wanted me to be, so I vote for the vertical pipe, or the double colon because these are more difficult to be found inside the article title and so they will propably cause less confusion.
    where is my prize?

    • Giannhs
      Permalink to comment#

      em… scrap the double colon! I vote only for the vertical pipe! (sorry mum..)

  5. Permalink to comment#

    I tend to change it pretty much every website. It depends on how I feel that day I suppose. Ha. But lately I’ve been feeling the simple and classy “›” (›)

    • Permalink to comment#

      I use that very often, too. It makes you read on:

      Sitename › Category › Title
    • Joeri
      Permalink to comment#

      This:

      Sitename › Category › Title

      … can be dangerous. Due to the limited number of characters in a tab-title, you might only be showing the user the sitename and part of the category in the tab-title text most of the time. Be sure to either keep it short on characters or reverse the order, so that the most important thing (the title of the current page) ís visible.

  6. Permalink to comment#

    It depends on the design of course but I think ~ is very pretty.

  7. Permalink to comment#

    The vertical pipeline |

  8. Permalink to comment#

    I find myself using the vertical pipe “|” more often than anything else. However, I’ve always liked the look of a simple hyphen “-” best.

  9. The vertical pipeline seems to be the best choise for me. :)

  10. The vertical pipe …

  11. Permalink to comment#

    It’s  !

  12. Maikel
    Permalink to comment#

    The “|” It works better.

  13. I kinda like the interpunct / middot: ·

  14. Permalink to comment#

    Tired set. We need more choices…

  15. Permalink to comment#

    Most cases the vertical pipeline |
    Sometimes •

  16. Mikulas Dite
    Permalink to comment#

    Just to clarify why I voted for Vertical bar, the | character: while offering the most visual differentiation of respective parts, it’s a few pixels thinner than dash (the another one most used delimiter).

  17. Permalink to comment#

    • or »
    but mostly •

  18. I would say: ♥ (only when it’s appropriate -°)

  19. Permalink to comment#

    em dash

  20. Permalink to comment#

    Always the pipe, it’s clean and separates the title nicely

  21. Permalink to comment#

    What purpose does this poll serve?

  22. marc
    Permalink to comment#

    |

  23. Permalink to comment#

    I voted for the bullet (•) although lately I find myself using ✿ quite a lot too.

  24. Permalink to comment#

    Hi!

    I voted for “::” but what I really love is the “.:.” separator. With some fonts, it appears like a three points star.

  25. Permalink to comment#

    Double slash:

    Title // Category // Site title
  26. Permalink to comment#

    What about fleuron? ❦ or ❧

  27. Whatever the clients requires

  28. Permalink to comment#

    I’ve always liked the vertical bar, mostly for the reason it separates really well and doesn’t take up too much space. Many years ago I always likes to use greater than symbols to create breadcrumbs in the title bar until it became bad practice to put the site name first (though I suppose it would still work from right to left pretty well too).

  29. Permalink to comment#

    The pipe is just a toy to play ASCII for people drawing the Cisco logo.

    I usually make a short name for the title: three words max. Separators are for long titles, the ones shortened when seen in tabs. The ones terribly cut by users when they have too many of them in their bookmarks bar.

    But we do have customers who NEEEED looooong titles. In this case, I vote for the “>” as a hierarchical symbol. Or the long “—” because …it is long.

    (sorry if my english is weird…)
    (cheers from Paris, France)

  30. stroke
    Permalink to comment#

    Title :: Sitename

  31. Bhavesh
    Permalink to comment#

    Mine is vertical pipe ” | “. . .

  32. Ralph
    Permalink to comment#

    What about…
    _
    Article Sitename

  33. Scott
    Permalink to comment#

    The bullet point always seemed most logical to me but I often just put dashes in there since it’s quicker and really doesn’t matter, to be honest :)

  34. Permalink to comment#

    For me it’s vertical pipe ‘|’ :]

  35. Dorota
    Permalink to comment#

    I like using | or :: It looks good in almost every template

  36. Permalink to comment#

    My favorite is the em dash :D

    Totally totally love it!

  37. Permalink to comment#

    Vertical pipe is my favorite for most sites.

  38. Richard
    Permalink to comment#

    It always depends on the paticular website design and what works at the time. I never limit myself to one style.
    Each can look good and each have their own pro’s and con’s.

    HOME - ABOUT - SERVICE 
    HOME – ABOUT – SERVICE
    HOME > ABOUT > SERVICE
    HOME → ABOUT → SERVICE
    HOME ← ABOUT ← SERVICE
    HOME · ABOUT · SERVICE
    HOME : ABOUT : SERVICE
    HOME / ABOUT / SERVICE
    HOME :: ABOUT :: SERVICE
    

    Although now I’m looking at them I think these two look the best!

    HOME ~ ABOUT ~ SERVICE
    HOME | ABOUT | SERVICE

  39. nykeri
    Permalink to comment#

    I tend to mix it up usually with the pipe, double colon or dash

  40. Permalink to comment#

    Spaces are my favorite for my sites.

  41. Permalink to comment#

    I use | but looking at the list I think I might start using the : :

  42. Man it has been a long time since I’ve seen an interrobang in the wild! Nice touch.

    Most of the time I use en-dash or em-dash or pipe, sometimes I throw in the double colon.

  43. Permalink to comment#

    “»” or “|”

  44. Permalink to comment#

    The bullet [ • ] is preferred, but I’ll fallback to the pipe if a client doesn’t care for the bullet.

  45. Permalink to comment#

    I always just default to the minus sign (-) simply because that’s what most browsers tend to — or used to — use for their names within the title bar. So the result looks consistent on those browsers, like this: “Site/Article/Page Title(s) - Windows Internet Explorer” (on IE8) or “Site/Article/Page Title(s) - Opera” (on Opera 11).

    And actually, I just now realized that the recent versions of Firefox and Chrome no longer append the browser name to the title bar, which could be enough of a reason for me to drop this approach…

  46. David
    Permalink to comment#

    I am missing this seperator in the vote:
    »

  47. Permalink to comment#

    The pipe looks good and does the job.

  48. Max Köhler
    Permalink to comment#

    I ususally use a / , but in some cases that looks too technical. Then the vertical Pipeline | is better.

  49. Go pipe!!!

  50. Andy
    Permalink to comment#

    I just realized people have awful tastes! How comes the use that gigantic | bar? looks a bit Nazi to me, also, did i mention is awful?

  51. I’d go for the small bullet too:

    Page title usually longer than site name · Website name

  52. I’ve been using, pipe (|), · (·) and • (•).

    If I had to choose a favourite then I’d go with •.

  53. I’d have to say the pipe |, though I should probably try messing with using dots and dashes once in a while on projects, for variety.

  54. Permalink to comment#

    I mostly use ” | ” and sometimes ” – ” !

  55. LastLifeLost
    Permalink to comment#

    Pipeline or a double-dash (- -) for me.

  56. Permalink to comment#

    Addicted to -

  57. Michael Johnson
    Permalink to comment#

    Here are some other possibilities. Can’t say I’ve used any of them but the poll got me thinking about it.

    Article►Site
    Article ▪ Site
    Article ▫ Site
    Article ◦ Site
    Article ¦ Site
    Article ‖ Site

    I kind of like the small black square and the small white square and bullet.

    • Permalink to comment#

      Careful with the triangle, it can look awful in some fonts. This is what it looks like on my Mac.

      With regards to the poll, I generally use | but lately I’ve become quite enamoured with · and •

    • Michael Johnson
      Permalink to comment#

      Oh, the triangle would definitely be one to be careful with. Actually, I think most of those would be somewhat dangerous, since support for them may be spotty in many fonts. And as the designer you have no control over the font.

  58. Permalink to comment#

    Mostly the vertical pipe “|” .

  59. using the one nearest mouse and my hand

    Krsiak.cz
    Gallery - Krsiak.cz
    Vacation - Gallery - Krsiak.cz
  60. Permalink to comment#

    That really should be a multi-choice poll, my favourite is the vertical pipe, but I also like a bullet or fancier things like heart glyph.

  61. Permalink to comment#

    | (vertical pipe) to separate the site name from a page name. Then a – (dash) to separate a blog entry from the page name.

  62. Permalink to comment#

    | vertical pipe 100%

  63. Permalink to comment#

    it’s either a dash or a vertical pipe: – |

  64. Permalink to comment#

    I like:
    *
    »


    /
    ::
    >
    ¦

  65. The pipe. It’s better for SEO. Now if you’re talking about in the post itself, I like pretty things so I usually do an image.

  66. Permalink to comment#

    The pipe ( | ) is my go to choice. But I also love the double slash ( // )

  67. Permalink to comment#

    It’s funny how Chris described this as being so ‘trivial’, yet this post has amassed over 80 comments and counting — much higher than most posts on CSS-Tricks.

  68. Permalink to comment#

    blah > bleh > bluh

    for breadcrumbs, and the reverse for the page title:

    bluh < bleh < blah

  69. Charbs
    Permalink to comment#

    Yeah I agree with the 658 voters (so far)! I prefer the pipe!

  70. I will go with Pipe :) . Its look good that’s why majority webmaster use pipe in Title.

  71. I prefere -.

  72. Vertical pipe “|” #cool

    Regars

  73. Ive seen a lot of sites of late using custom images to produce their separators i am trying to implement some custom ones myself but am struggling i must admit

  74. Paul Verbeek
    Permalink to comment#

    I like to use ☣ or §, but most clients don’t agree.

  75. Permalink to comment#

    And no one’s mentioned Mozilla Hacks‘s separator: ✩. Poor .

  76. Permalink to comment#

    Big fan of the vertical pipeline ( | ) and the forward slash ( / )

  77. Permalink to comment#

    I prefer vertical pipe.

  78. Permalink to comment#

    Everyone should show their | pipes.

  79. Permalink to comment#

    we like · (‘&’middot;)

  80. Permalink to comment#

    Most of the time I have used (-)… But will surely try using two dots ( :: ) in upcoming development….

  81. Jason King
    Permalink to comment#

    I prefer « or » depending on how the page title has been constructed.

    Because an arrow unmistakeably indicates how items are related to one another, and which is more important / upper level.

    Colons indicate a relationship, but make items on the left look more important than those on the right.

    Pipes and middle dot make items look equal in importance.

  82. Dave
    Permalink to comment#

    I think you all are over thinking your site designs. Normal earthlings don’t really care what separator you use…

  83. Permalink to comment#

    My fav is The vertical pipe |

  84. Dipak Ukani
    Permalink to comment#

    | prefer vertical pipe. |

  85. Definitely the Vertical Pipe |

  86. Now that you mention it, Chris:

    Welcome Sarcasm.com ‽ No, I really mean it ‽ We want to hear your feedback ‽

  87. Happy
    Permalink to comment#

    In most cases, I use
    \(^____^)/

    Users love it!!!

  88. I would say “|” is the most clean, or “::”

  89. I personally choose the vertical pipeline | too because I thinks it’s the cleanest and a dash can be confusing if you have a dash in your page name. The » is a good second choice for me.

  90. Personally I choose – and | too in my website.
    I use – for my Homepage i.e. domain.com _or just domain – Your Website Description
    I use | for archive, page, and post i.e. Separator | domain.com _or just domain) – Your Website Description

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".