geildanke typography

typography settings for new geildanke.com

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>geildanke typography</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h1>
<p class="teaser">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem <a href="http://www.geildanke.com">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
  <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
  <li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
  <li>Justo duo dolores et ea rebum</li>
  <li>Dolores</li>
  <li>Lorem</li>  
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea <a href="http://www.geildanke.com">takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<blockquote><p>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."</p><footer>Richard Brammer, CEO, <a href="http://www.geildanke.com">Geil,Danke! GmbH</a></footer></blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ol>
  <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
  <li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
  <li>Justo duo dolores et ea rebum</li>
  <li>Dolores</li>
  <li>Lorem</li>  
</ol>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://www.geildanke.com">At vero eos et accusam et justo duo dolores et ea rebum.</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
  <script src='https://use.typekit.net/qwo7ttu.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
@import url(https://fonts.googleapis.com/css?family=Neuton|Raleway|Open+Sans|Merriweather);
body {
  background: #EFEFEF;
  margin: 0 auto;
  width: 37.7em;
  color: #444;
  font-family: "proxima-nova-alt";
  font-size: 18px;
  line-height: 28px;
}
body html {
  font-size: 112.5%;
  line-height: 1.55556em;
}

h1 {
  padding-top: 84px;
  padding-bottom: 56px;
  font-family: "quatro-slab";
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1.5em;
}

h2 {
  padding-top: 56px;
  padding-bottom: 42px;
  font-family: "quatro-slab";
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5em;
}

h3 {
  padding-top: 56px;
  padding-bottom: 42px;
  font-family: "quatro-slab";
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.5em;
}

a {
  border-bottom: 1px dashed #666;
  color: #444;
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid #666;
}

p {
  padding-bottom: 28px;
}

blockquote {
  padding-top: 28px;
  margin: 0 4em;
  font-family: "Merriweather";
  font-style: italic;
}

blockquote p {
  padding-bottom: 0;
}

blockquote footer {
  padding-bottom: 56px;
  font-family: "Raleway";
  font-size: 0.75em;
  font-style: normal;
  text-align: right;
}

ul,
ol {
  padding-bottom: 42px;
  margin-left: 3em;
  padding-left: 1em;
  list-style-position: outside;
}

ul li {
  list-style-type: square;
}

ol li {
  list-style-type: decimal;
}

.teaser {
  line-height: 1.875em;
  font-size: 1.25em;
  font-weight: 700;
}
/* Downloaded from https://www.codeseek.co/ */
try{Typekit.load();}catch(e){}

This awesome code ( geildanke typography ) is write by Michaela, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Michaela