Exercise 4: Typography

I experimented with these techniques from Chapter 5

A Hyphenation

A dream is a wish your heart makes when you're fast asleep. In dreams you will lose your heartaches. Whatever you wish for, you keep.

.hyphens {
width: 95%;
margin: 0 auto;
font-size: 2rem;
line-height: 2.5rem;
color: rgba(219, 39, 72, 1);
text-align: justify;
hyphens: auto;
}

B Line Breaks

Name:
Reyna Perez
Email:
hello@reynanicolette.com
Location:
Orlando
dt, dd {
display: inline;
margin: 0;
}

dt {
font-weight: 600;
}

dd + dt::before {
content: "\A";
white-space: pre; }

dd + dd::before {
content: ', ';
font-weight: normal;
margin-left: -.25em;
}

C Zebra Striped Text Lines

They will not force us.

They will stop degrading us.

They will not control us.

We will be victorious.

.zebraStripes { padding: .5em;
line-height: 1.5;
background: rgba(76, 83, 96, 1);
background-image:
linear-gradient(
rgba(252, 253, 255, .3) 50%,
transparent 0);
background-size: auto 3em;
background-origin: content-box;
color: rgba(252, 253, 255, 1);
}

D Adjusting Tab Width

                        
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
};
                        
                    

E Ligatures

flirt, act, first
                        
.ligatures {
    font-size: 3rem;
    line-height: 3rem;
    font-family: "Adobe Caslon Pro", Baskerville, serif;
    font-variant-ligatures: common-ligatures
                            discretionary-ligatures
                            historical-ligatures;
}
                        
                    

F Fancy ampersands

You & I


@font-face {
    font-family: Ampersand;
    src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic');
    unicode-range: U+26;
}


h1 {
    font-family: "Ampersand", "Open Sans", sans-serif;
}

                    

G Custom Underlines

I brag about you to anyone outside, but I'm a man of the woods it's my pride

.underlines {
    line-height: 1.25rem;
}

a {
    background: linear-gradient(rgba(219, 39, 72, 1), rgba(219, 39, 72, 1)) no-repeat;
    background-size: 100% 3px;
    background-position: 0 1.25em;
    text-shadow: .05em 0 white, -.05em 0 white;
}
                    

H Realistic Text Effects

REYNA


.textEffect {
    color: rgb(252, 253, 255);
    font-size: 2rem;
    line-height: 2.5rem;
}

.textEffect h1:first-child { text-shadow: 1px 1px rgb(219, 39, 72), -1px -1px rgb(219, 39, 72), 1px -1px rgb(219, 39, 72), -1px 1px rgb(219, 39, 72); }

.textEffect h1 text { fill: rgb(219, 39, 72) }
.textEffect h1 use {
    stroke: rgb(219, 39, 72); 
    stroke-width: 6;
    stroke-linejoin: round;
}
                    

I Circular Text

I'm going around in circles!

.circular {
    width: 70%;
    margin: 2rem auto;
    font-weight: 600;
    text-transform: uppecase;
}

.circular svg {
    display: block;
    overflow: visible;
    transition: 10s linear transform;
}

.circular svg:hover { transform: rotate(-2turn); }

.circular text { fill: currentColor }
.circular path { fill: none; }

function $$(selector, context) {
    context = context || document;
    var elements = context.querySelectorAll(selector);
    return Array.prototype.slice.call(elements);
}

$$('.circular').forEach(function(el) {
    var NS = "http://www.w3.org/2000/svg";
    
    var svg = document.createElementNS(NS, "svg");
    svg.setAttribute("viewBox", "0 0 100 100");
    
    var circle = document.createElementNS(NS, "path");
    circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
    circle.setAttribute("id", "circle");
    
    var text = document.createElementNS(NS, "text");
    var textPath = document.createElementNS(NS, "textPath");
    textPath.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', '#circle');
    textPath.textContent = el.textContent;
    text.appendChild(textPath);
    
    svg.appendChild(circle);
    svg.appendChild(text);
    
    el.textContent = '';
    el.appendChild(svg);
});