Skip to content

Instantly share code, notes, and snippets.

@profstein
Created April 28, 2021 22:31
Show Gist options
  • Save profstein/58123c5ff7df899117737072061daeb4 to your computer and use it in GitHub Desktop.
Save profstein/58123c5ff7df899117737072061daeb4 to your computer and use it in GitHub Desktop.
Base Web Site Typography
/* Optional, include a web font */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;600&family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* The html and body selectors below set the base font for the entire page */
html {font-size: 1rem;}
/* Note: this sheet uses Serif font for body and sans for headings. You will want to change this to fit your site */
body {
font-family: 'EB Garamond', serif;
font-weight: 400;
line-height: 1.5;
color: #333;
}
/* This adds space between paragraphs and list items
NOTE: most Navigations use list items so you will need to
explicity set the margins on those so this rule doesn't
mess up your navigation styling */
p, li {
margin-top: 0;
margin-bottom: 1rem;
}
/* LINKS: these should also have color and styles changed to fit your site */
/* A link that has not been visited */
a:link {
color: #000080;
text-decoration: none;
border-bottom: 1px solid #000080;
}
/* A link that has been visited */
a:visited {
color: purple;
border-bottom: 1px dashed purple;
}
/* A link that is hovered on */
a:hover {
color: red;
border-bottom: 1px solid red;
}
/* A link that is selected */
a:active {
color: green;
border-bottom: 1px solid green;
}
/* Base Styling for headings */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
font-family: 'Antonio', sans-serif;
}
/* For each of your headings at minimum set the margin, size, line-height. Adjust font-weight and other properties as needed. */
h1 {
font-size: 5.063em;
line-height: 1;
margin: 0 0 0.5em 0;
}
h2 {
font-size: 3.375em;
line-height: 1.2;
margin: 1.5em 0 0.5em 0;
}
h3 {
font-weight: 100;
font-size: 2.25em;
line-height: 1;
margin: 1.5em 0 0.25em 0;
}
h4 {
font-size: 1.5em;
line-height: 1;
margin: 1.5em 0 0.5em 0;
}
h5 {
font-size: 1em;
line-height: 1;
margin: 1.5em 0 0.5em 0;
}
h6 {
font-size: 1em;
line-height: 1.5;
margin: 1em 0 0 0;
font-weight: 400; /* normal */
text-transform: uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment