Unown Sans


            Unown Sans is a font that is recreated from Unown, a series of mystery pokemons that represents archaeology and unkown worlds. The font is itself is done by CSS, a web design language for front-end.

.
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
.

.A {
position: relative;
width:150px;
height: 150px;
}

.A:before {
position: absolute;
transform:skew(-19deg,0);
content:'';
left:42px;
width:10px;
height:150px;
background-color:#000000;
}

.A:after{
transform:skew(19deg,0);
position:absolute;
content:'';
left:97px;
width:10px;
height:150px;
background-color:#000000;
}
a
.B {
height: 120px;
width: 100px;
border-bottom: 10px solid black;
}

.B:before {
position: absolute;
content:'';
top:80px;
left: 13px;
width: 70px;
height: 70px;
border:10px solid black;
border-radius: 50%;
background: white;
}

.B:after{
position:absolute;
content:'';
left: 15px;
height: 40px;
width: 100px;
border-bottom: 10px solid black;
}
b
.C {
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
}

.C:before {
position: absolute;
content:'';
height: 75px;
width: 75px;
bottom: -10px;
right: -10px;
background: white;
border-top: 10px solid black;
}

.C:after{
position:absolute;
content:'';
width: 10px;
height: 15px;
background: black;
left: 75px;
bottom: -15px;
}
c
.D {
position: relative;;
height: 150px;
width: 150px;
border:10px solid black;
border-radius: 50%;
}

.D:before {
position: absolute;
content: '';
top: 0;
left: -77px;
height: 75px;
width: 150px;
border-right:10px solid black;
}

.D:after{
position: absolute;
content: '';
height: 170px;
width: 85px;
left: -12px;
top: -10px;
background: white;
}
d
.E {
position: relative;
height: 150px;
width: 150px;
margin: 20px auto;
}

.E:before {
position: absolute;
content:'';
height: 150px;
width: 75px;
top: 0;
right: 0;
border-top: 10px solid black;
border-left: 10px solid black;
border-bottom: 10px solid black;
border-radius: 40px 0 0 40px;
}

.E:after{
position:absolute;
content:'';
width: 145px;
height: 80px;
border-bottom: 10px solid black;
}
e
.F{
position:relative;
top:42.5px;
left:20px;
width:75px;
height:110px;
border-width:10px 0 0 10px;
border-color:#000000;
border-style:solid;
}

.F:before{
position:absolute;
content:'';
top:55px;
left:0px;
width:35px;
height:10px;
background-color:#000000;
}

.F:after{
position: absolute;
content: '';
width: 60px;
height: 60px;
border-width:0 0 10px 10px;
border-radius: 0 0 15px 20px;
border-color:#000000;
border-style:solid;
transform:rotate(-45deg);
top:-35px;
}
f
.G{
position: relative;
margin: 0 auto;
top:-35px;
width: 80px;
height: 80px;
border-bottom: 10px solid black;
border-right: 10px solid black;
transform:rotate(45deg);
border-radius:0 15px 0 15px;
}

.G:before{
position: absolute;
content: '';
top:70px;
left: 90px;
width: 80px;
height: 80px;
border-bottom: 10px solid black;
border-right: 10px solid black;
transform:rotate(90deg);
}

.G:after{
position: absolute;
content: '';
top:25px;
left: -3px;
width: 115px;
height: 50px;
border-top: 10px solid black;
border-radius: 15px 15px 0 0;
transform:rotate(-45deg);
}
g
.H {
position: relative;
height: 150px;
width: 150px;
border:10px solid black;
border-radius: 50%;
}

.H:before {
position: absolute;
content: '';
height: 75px;
width: 150px;
border-bottom:10px solid black;
}

.H:after{
position: absolute;
content: '';
height: 180px;
width: 10px;
left: 70px;
top: -15px;
background: white;
}
h
.I {
position: relative;
height: 150px;
width: 150px;
}

.I:before {
position: absolute;
content: '';
top: 0;
left: -5px;
height: 180px;
width: 75px;
border-right:10px solid black;
}
i
.J{
position: relative;
height: 150px;
width: 125px;
}

.J:before{
position: absolute;
content: '';
height: 20px;
width: 20px;
border-left:15px solid black;
transform:skew(-45deg,0);
right: 10px;
top: 5px;
}

.J:after{
position:absolute;
content:'';
bottom:-19px;
right:65px;
width:50px;
height:60px;
border-width:0 10px 10px 10px;
border-color:#000000;
border-style:solid;
border-radius:0 0 75%75%;
}
j
.K {
position: relative;
height: 150px;
width: 150px;
}

.K:before {
position: absolute;
content: '';
top: 0;
left: -5px;
height: 180px;
width: 75px;
border-right:10px solid black;
}

.K:after {
position: absolute;
content: '';
top: 55px;
left: 120px;
height: 60px;
width: 60px;
border-left:10px solid black;
border-top:10px solid black;
transform: rotate(-45deg);
}
k
.L{
position: relative;
height: 150px;
width: 110px;
margin: 0 auto;
}

.L:before{
position: absolute;
content: '';
height: 120px;
width: 65px;
left: 50px;
top: 50px;
border-left: 10px solid black;
border-bottom: 10px solid black;
}

.L:after{
position: absolute;
content: '';
height: 20px;
width: 20px;
border-left:15px solid black;
transform:skew(45deg,0);
left: 10px;
top: 5px;
}
l
.M {
position:relative;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
background: white;
transform: rotate(45deg);
margin: 0 auto;
}

.M:before {
position: absolute;
content:'';
height: 75px;
width: 75px;
bottom: -10px;
right: -10px;
background: white;
}

.M:after{
position:absolute;
content:'';
width: 75px;
height: 75px;
border-left: 10px solid black;
left:25px;
top: -20px;
transform: rotate(-45deg);
}
m
.N {
position:relative;
height: 150px;
width: 150px;
margin: 0 auto;
}

.N:before {
position: absolute;
content: '';
height: 170px;
width: 130px;
border-left:10px solid black;
border-right:10px solid black;
transform:skew(-19deg,0);
}

.N:after{
position: absolute;
content: '';
height: 170px;
width: 120px;
border-right:10px solid black;
transform:skew(26deg,0);
left: -50px;
}
n
.O {
position: relative;
height: 150px;
width: 150px;
border:10px solid black;
border-radius: 50%;
margin: 0 auto;
}

.O:before {
position: absolute;
content: '';
top: 75px;
left: -80px;
height: 75px;
width: 150px;
/*background: black;*/
border-right:10px solid black;
/*border-right:5px solid black;*/
/*border-radius: 50%;*/
}
o
.P{
position: relative;
height: 150px;
width: 110px;
margin: 0 auto;
}

.P:before{
position: absolute;
content: '';
height: 130px;
width: 10px;
background: black;
left: 10px;
top: 50px;
}

.P:after{
position: absolute;
content: '';
height: 20px;
width: 20px;
border-left:15px solid black;
transform:skew(45deg,0);
left: 10px;
top: 5px;
}
p
.Q{
position: relative;
height: 150px;
width: 110px;
}

.Q:before{
position: absolute;
content: '';
height: 120px;
width: 60px;
border-right:15px solid black;
transform:skew(45deg,0);
right: 25px;
bottom: -5px;
}

.Q:after{
position: absolute;
content: '';
height: 20px;
width: 20px;
border-left:15px solid black;
transform:skew(-45deg,0);
left: 105px;
top: 100px;
}
q
.R{
position: relative;
height: 150px;
width: 150px;
margin: 0 auto;
}

.R:before{
position: absolute;
content: '';
height: 130px;
width: 10px;
background: black;
left: 10px;
top: 50px;
}

.R:after{
position: absolute;
content: '';
height: 40px;
width: 40px;
border-left:15px solid black;
transform:skew(45deg,0);
left: 80px;
top: 80px;
}
r
.S {
position: relative;
height: 150px;
width: 150px;
margin: 0 auto;
}

.S:before {
position: absolute;
content: '';
top:5px;
left: 10px;
height: 110px;
width: 115px;
border-left:10px solid black;
border-right:10px solid black;
border-radius: 10px 15px 10px 15px;
transform:rotate(60deg);
}

.S:after{
position: absolute;
content: '';
height: 153.5px;
width: 120px;
border-right:10px solid black;
/*border-radius: 0 10px 10px 0;*/
top:40px;
left: -5.7px;
transform:rotate(-72deg);
}
s
.T {
position: relative;
width: 100px;
height:150px;
border-top: 10px solid black;
}

.T:before {
position: absolute;
content: '';
height: 60px;
width: 45px;
border-right: 10px solid black;
}
t
.U {
position:relative;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
margin: 0 auto;
}

.U:before {
position: absolute;
content:'';
height: 95px;
width: 170px;
top:-20px;
left: -10px;
background: white;
}

.U:after{
position:absolute;
content:'';
width: 10px;
height: 85px;
background: black;
left: 70px;
bottom: 0;
}
u
.V{
position: relative;
margin: 0 auto;
top:-35px;
width: 120px;
height: 120px;
border-bottom: 10px solid black;
border-right: 10px solid black;
transform:rotate(45deg);
border-radius:0 15px 0 15px;
}

.V:before{
position: absolute;
content: '';
top:45px;
left: -10px;
width: 170px;
height: 50px;
border-top: 10px solid black;
border-radius: 15px 15px 0 0;
transform:rotate(-45deg);
}

v
.W {
position:relative;
height: 150px;
width: 150px;
transform: rotate(-90deg);
}

.W:before {
position: absolute;
content:'';
height: 150px;
width: 55px;
top: 0;
right: 15px;
border-top: 10px solid black;
border-left: 10px solid black;
border-bottom: 10px solid black;
border-radius: 50px 0 0 50px;
}

.W:after{
position:absolute;
content:'';
left: 45px;
width: 105px;
height: 80px;
border-bottom: 10px solid black;
}
w
.X {
position: relative;
height: 150px;
width: 150px;
margin: 0 auto;
}

.X:before {
position: absolute;
content: '';
height: 135px;
width: 60px;
border-right:15px solid black;
transform:skew(45deg,0);
left: 20px;
bottom: -5px;
}

.X:after {
position: absolute;
content: '';
height: 135px;
width: 60px;
border-right:15px solid black;
transform:skew(-45deg,0);
left: 20px;
bottom: -5px;
}
x
.Y{
position:relative;
top:100px;
left:52px;
width:10px;
height:50px;
background-color:#000000;
}

.Y:before{
transform:skew(45deg,0);
position:absolute;
content:'';
top:-80px;
left:-21px;
width:15px;
height:80px;
background-color:#000000;
}

.Y:after{
transform:skew(-45deg,0);
position:absolute;
content:'';
top:-80px;
right:-21px;
width:15px;
height:80px;
background-color:#000000;
}
y
.Z{
position: relative;
width: 150px;
height: 150px;
}

.Z:before{
position: absolute;
content: '';
top:40px;
left: 50px;
height: 100px;
width: 95px;
border-left:10px solid black;
border-radius: 10px 15px 10px 15px;
transform:rotate(-60deg);
}

.Z:after{
position: absolute;
content: '';
top:5px;
left: 0px;
height: 100px;
width:85px;
border-right:10px solid black;
border-radius: 10px 15px 10px 15px;
transform:rotate(-60deg);
}
z