CSSだけで、ロゴ風のテキスト表示を実装するテストです。

サンプルは、上から順に無加工の元のテキスト、２番目が、「letter-spacing: 3px」を使って文字間をあけ、「transform: scale(1.2, 1)」を使って文字の横幅を20%のばした平体にし、「text-shadow」を使ってアウトラインを表現し、同じものを二つ重ねてずらしています。

３番目は、２番目の色替えです。

HTMLソース

<div class="logowrap">
	<div class="like-logo0">Conifer</div>
  
/*---２番目---*/
	<div class="like-logo1">Conifer</div>
	<div class="like-logo2">Conifer</div>
  
/*---３番目---*/  
 	<div class="like-logo3">Conifer</div>
	<div class="like-logo4">Conifer</div>
</div>

CSSソース

div.like-logo0 {
	color:#333;
	position:absolute;
	top:20px;
	left:46px;
	}
div.like-logo1 {
	color:darkgreen;
	letter-spacing: 3px;
	text-shadow: darkgreen 2px 2px 0px, darkgreen -2px 2px 0px, 
  		darkgreen 2px -2px 0px, darkgreen -2px -2px 0px;
	transform: scale(1.2, 1);
	position:absolute;
	top:140px;
	left:50px;
	}
div.like-logo2 {
	color:#cfd;
	letter-spacing: 3px;
	text-shadow: darkgreen 1px 1px 0px, darkgreen -1px 1px 0px, 
  		darkgreen 1px -1px 0px, darkgreen -1px -1px 0px;
	transform: scale(1.2, 1);
	position:absolute;
	top:136px;
	left:46px;
	z-index:1;
	}
div.like-logo3 {
	color:#26c;
	letter-spacing: 3px;
	text-shadow: #26c 2px 2px 0px, #26c -2px 2px 0px, #26c 2px -2px 0px, #26c -2px -2px 0px;
	transform: scale(1.2, 1);
	position:absolute;
	top:260px;
	left:50px;
	}
div.like-logo4 {
	color:#37d;
	letter-spacing: 3px;
	text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
	transform: scale(1.2, 1);
	position:absolute;
	top:256px;
	left:46px;
	z-index:1;
	}