These are the text treatments that we are looking to standardize on when creating or editing components on SFUSD sites.
Note: these font sizes use a standard 16px base font size for rem units, and would need different rem values with a 10px base font size, such as currently set on sfusd.edu.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
body {
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 100%; /* 16px */
font-weight: 400; /* Normal */
line-height: 1.7;
color: #4f5357; /* grey-30 */
}
p {
margin: 1em 0;
}
@media only screen and (min-width: 768px) {
p {
font-size: 1.125rem; /* 18px */
}
}
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
a {
color: #1176a8; /* blue-50 */
text-decoration: underline;
}
a:hover {
color: #cb3721; /* red */
}
a:active {
text-decoration: none;
}
|
What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
h1 {
font-family: Rokkitt, Georgia, Times, Times New Roman, serif;
font-size: 2rem; /* 32px */
font-weight: 400; /* Normal */
line-height: 1;
color: #212121;
margin-top: .85em;
margin-bottom: .85em;
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 3rem; /* 48px */
}
}
|
|
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Where does it come from?Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. |
h2 {
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.5rem; /* 24px */
font-weight: 900; /* Black */
line-height: 1.25;
color: #0a5c86;
margin-top: 1.5em;
margin-bottom: .75em;
}
h2::after {
display: block;
margin-top: .5em; /* 20px */
background-color: #ffc700;
content: "";
height: .15em; /* ~5px */
width: 1.5em; /* ~50px */
}
@media only screen and (min-width: 768px) {
h2 {
font-size: 2.125rem; /* 34px */
}
}
|
|
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. Where can I get some lorem ipsum to use on my site?There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. |
h3 {
font-size: 1.25rem; /* 20px */
font-weight: 700; /* Bold */
line-height: 1.25;
margin-top: 1.5em;
margin-bottom: .75em;
}
@media only screen and (min-width: 768px) {
h3 {
font-size: 1.5rem; /* 24px */
}
}
|
|
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. Where can I get some lorem ipsum to use on my site?There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. |
h4 {
font-size: 1.125rem; /* 18px */
font-weight: 700; /* Bold */
line-height: 1.25;
margin-top: 1.5em;
margin-bottom: .75em;
}
@media only screen and (min-width: 768px) {
h4 {
font-size: 1.25rem; /* 20px */
}
}
|
|
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. Where can I get some lorem ipsum to use on my site?There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. |
h5 {
font-size: 1rem; /* 16px */
font-weight: 700; /* Bold */
margin-top: 2rem;
margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
h5 {
font-size: 1.125rem; /* 18px */
}
}
|
|
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. |
small {
font-size: .875em; /* 14px of 16px, 15.75px of 18px */
}
|
aside h2 {
font-family: Rokkitt, Georgia, Times, Times New Roman, serif;
font-size: 1.875rem; /* 30px */
font-weight: 400; /* Normal */
line-height: 1.25;
margin-top: 1em;
margin-bottom: .5em;
color: #212121;
}
aside h2::after {
display: none;
}
@media only screen and (min-width: 768px) {
aside h2 {
font-size: 2.375rem; /* 38px */
}
}
| |
Graduation Rate ImprovesSFUSD's graduation rate rose to 89% in 2019, and data show more students are graduating ready for college and career. |
h2.strong-heading {
font-weight: 900; /* Black */
color: #212121;
text-transform: uppercase;
}
h2.strong-heading::after {
display: none;
}
|
.card a {
display: block;
color: #4f5357; /* grey-30 */
text-decoration: none;
box-shadow: 0 1px 3px 0 #c2c8cf; /* grey-80 */
padding: 2em;
}
.card a:hover {
box-shadow: 0 1px 4px 0 #a3acb6; /* grey-70 */
}
.card a h3 {
font-family: Rokkitt, Georgia, Times, Times New Roman, serif;
color: #1176a8; /* blue-50 */
margin: 0 0 .5em;
}
.card a:hover h3 {
color: #cb3721; /* red */
}
.card p {
margin: .5em 0 0;
}
| |
|
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. |
figure {
margin: 3rem 0;
}
figcaption {
font-size: .875rem; /* 14px */
margin-top: .5em;
}
@media only screen and (min-width: 768px) {
figcaption {
font-size: 1rem; /* 16px */
}
}
|
|
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. |
blockquote {
font-family: Rokkitt, Georgia, Times, Times New Roman, serif;
font-size: 1.25rem; /* 20px */
line-height: 1.5;
color: #0a5c86;
margin: 1.5em;
}
blockquote p {
font-size: 1.25rem; /* 20px */
}
@media only screen and (min-width: 768px) {
blockquote, blockquote p {
font-size: 1.5rem; /* 24px */
}
}
|
|
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. |
figure blockquote {
margin: 1em 1.5em;
}
figure blockquote + figcaption {
margin: 0 5em 0;
color: #0a5c86;
}
figure blockquote + figcaption cite {
margin: 0;
display: block;
font-weight: 700;
text-transform: uppercase;
font-style: normal;
}
figure blockquote + figcaption cite::before {
content: "\2014";
display: inline-block;
width: 0;
position: relative;
left: -1.25em;
}
|
ul.menu {
padding: 0;
}
.menu-item {
display: inline-block;
font-size: .875rem; /* 14px */
font-weight: bold;
text-transform: uppercase;
}
ul.menu a {
text-decoration: none;
padding: 1.25em;
color: #1176a8; /* blue-50 */
}
| |
button, input[type='submit'] {
background-color: #2e365b;
color: #fff;
font-size: 0.8125rem; /* 13px */
font-weight: 600;
text-transform: uppercase;
padding: 1.2em 2em 1.1em;
border: 0;
letter-spacing: .11em;
border: 2px solid white; /* Leave space for focus outline. */
margin: -2px;
}
button:hover, input[type='submit']:hover {
background-color: #1176a8; /* blue-50 */
}
button:focus, input[type='submit']:focus {
outline-color: #1176a8; /* blue-50 */
}
@media only screen and (min-width: 768px) {
button, input[type='submit'] {
font-size: .875rem; /* 14px */
}
}
| |
label {
display: block;
font-size: 1rem; /* 16px */
margin: 1em 0 .5em;
}
label.required::after {
content: "*";
color: #cb3721;
margin-left: .2em;
font-weight: bold;
}
input[type='text'] {
font-size: 1rem; /* 16px */
border: 1px solid #8d9296;
padding: .875rem 1em;
color: #212121;
}
input[type='text']::placeholder {
color: #8d9296;
}
input[type='text']:focus {
border-color: #3d9bca;
outline: 1px solid #3d9bca;
}
input[type='text'].error {
border-color: #ec533c;
}
input[type='text'].error:focus {
border-color: #ec533c;
outline-color: #ec533c;
}
|