Starting Variable fonts template for playing around with Decover.
A Pen by Mandy Michael on CodePen.
<h1 data-text="Hello">Hello</h1> |
@font-face { | |
font-family: 'Decovar'; | |
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/DecovarVF.ttf'); | |
} | |
h1 { | |
margin: 0; | |
font-size: 20vw; | |
position: relative; | |
font-weight: 400; | |
// Define the font family | |
font-family: "Decovar"; | |
// Set your variable font settings. | |
// A visualisation can be seen on the AxisPraxis website: | |
// https://www.axis-praxis.org/specimens/decovar | |
font-variation-settings: | |
'BLDA' 200, | |
'TRMD' 0, | |
'TRMC' 0, | |
'SKLD' 300, | |
'TRML' 0, | |
'SKLA' 0, | |
'TRMF' 0, | |
'TRMK' 0, | |
'BLDB' 0, | |
'WMX2' 0, | |
'TRMB' 0, | |
'TRMA' 0, | |
'SKLB' 0, | |
'TRMG' 0, | |
'TRME' 0; | |
} | |
// Layering with pseudo-elements | |
h1::before { | |
// Pass in the name of the data-attribute on the h1. This | |
// tells your CSS what text you want displayed on your new layer. | |
// Typically we want this the same as our h1 text. | |
content: attr(data-text); | |
// Set the width to 100% of your h1 to ensure it doesn't wrap. | |
width: 100%; | |
// Set position to absolute - remove it from the flow of | |
// elements and allows you to set it exactly over the top | |
// of your h1 creating your layer. | |
position: absolute; | |
// Set the co-ordinates you want your layer to be positioned from. | |
// Resetting to top left just makes sure it sits over the top. | |
// You can offset these if you don't want perfect alignment. | |
left: 0; | |
top: 0; | |
} | |
// Positioning - This is general CSS positioning to center the text in the page. It's not required for the text effect you can modify these however you like. | |
html { | |
height: 100%; | |
} | |
body { | |
background: #fff; | |
height: 100%; | |
} | |
h1 { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
&:after, &:before { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 100%; | |
} | |
} |
Starting Variable fonts template for playing around with Decover.
A Pen by Mandy Michael on CodePen.