System Fonts Can Be Beautiful

Developer
Brian Haferkamp
Size
7,239 Kb
Views
8,096
  1. System Fonts Can Be Beautiful Previews
  2. System Fonts Can Be Beautiful HTML Codes
  3. System Fonts Can Be Beautiful CSS Codes

How do I make an system fonts can be beautiful?

Just because system fonts are safe doesn't mean they can't be beautiful. Here is an exploration of the fonts Georgia and Trebuchet MS, both system--or web safe--fonts. Brutalism principles strip away but it doesn't mean sites can't be beautiful.. What is a system fonts can be beautiful? How do you make a system fonts can be beautiful? This script and codes were developed by Brian Haferkamp on 10 October 2022, Monday.

System Fonts Can Be Beautiful Previews
IQ Test

System Fonts Can Be Beautiful - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>System Fonts Can Be Beautiful</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- This pen uses only system fonts--Georgia and Trebuchet MS, to be specific.-->
<!-- The point of this exercise is to show that using system fonts-->
<!-- can be a legitimate choice for a modern website. Why trigger-->
<!-- unnecessary HTTP requests using Google fonts or go through the -->
<!-- hassle of serving local fonts through a @font-face declaration?-->
<!-- There are a number of system fonts that will display the same-->
<!-- across operating systems.-->
<nav class="site-nav"><a class="site-title" href="">Site Title</a> <div class="main-nav"> <ul> <li>Pages</li>| <li><a href="">Link1</a></li> <li><a href="">Link2</a></li> <li><a href="">Link3</a></li> <li><a href="">Link4</a></li> </ul> </div>
</nav>
<article class="main-article"> <header> <h3 class="byline">Posted by <a href="">Author Name</a> | <a href="">October 11, 2016</a> | <a href="">category1</a>, <a href="">category2</a></h3> <h1 class="article__headline">Article headline lorem ipsum dolor sit amet, consectetur adipisicing elit</h1> <h2 class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sunt placeat, omnis provident eius sapiente fugiat sequi officiis laboriosam dolor</h2> </header> <article> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deserunt odio soluta tenetur doloribus eligendi sint, delectus sunt recusandae id maxime praesentium consectetur incidunt quam omnis officia, voluptatem nostrum in!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur corporis harum quaerat. Qui aliquam nostrum laborum dicta et, soluta suscipit autem, mollitia, eveniet blanditiis ipsa! Cum beatae aspernatur iure laborum quibusdam, facere natus odit ex, inventore illo laboriosam tempora asperiores. Harum illo odit, nostrum veritatis, voluptate ea deleniti ipsa alias!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa perferendis provident ducimus aliquam esse tenetur ex eveniet animi in.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa perferendis provident ducimus aliquam esse tenetur ex eveniet animi in.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid praesentium similique soluta in facilis quidem dicta inventore odio. Nisi debitis, itaque at in suscipit quisquam iusto veritatis officia doloremque praesentium harum voluptas ducimus animi, aspernatur repellendus dolor delectus expedita esse minus laborum? Consequatur veniam magni expedita tempore aperiam iste, culpa? &nbsp;&spades;</p> </article> <aside class="author-bio"> <img class="profile-pic" src="http://fillmurray.com/120/120"/> <div class="author-bio-text"> <p class="author-bio-name">Author Name</p> <p class="author-bio-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam saepe ab aliquam. Illo consectetur, eaque consequatur atque quod impedit adipisci.</p> </div> <div class="social-icons"><a href=""> <p><i class="fa fa-facebook-square" aria-hidden="true"></i></p></a><a href=""> <p><i class="fa fa-linkedin-square" aria-hidden="true"></i></p></a><a href=""> <p><i class="fa fa-twitter-square" aria-hidden="true"></i></p></a></div> </aside> <section class="comments"> <h3 class="section-heading">Comments</h3> <div class="comments__meta"> <p><i class="fa fa-comment-o" aria-hidden="true"></i>&nbsp; <span>Comments:</span> 8</p><span> &nbsp; | &nbsp;</span> <p><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; <span>Favorites:</span> 3</p><span> &nbsp; | &nbsp;</span> <p><i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; <span>Up votes:</span> 12</p> </div> <!-- comment 1--> <div class="comment__group"> <div class="comment__author-image"><img class="profile-pic" src="http://fillmurray.com/100/100"/></div> <div class="comment"> <div class="comment__author-name"><a href=""> <h5>Comment Author</h5></a></div> <div class="comment__text"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.</p> </div> <div class="comment__text--meta"><a href=""> <p><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; 1</p></a><a href=""> <p><i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; 3</p></a></div> </div> </div> <!-- comment 1 reply--> <div class="comment__group comment__indented"> <div class="comment__author-image"><img class="profile-pic" src="http://fillmurray.com/100/100"/></div> <div class="comment"> <div class="comment__author-name"><a href=""> <h5>Comment Author</h5></a></div> <div class="comment__text"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.</p> </div> <div class="comment__text--meta"><a href=""> <p><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; 0</p></a><a href=""> <p><i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; 1</p></a></div> </div> </div> <!-- comment 2--> <div class="comment__group"> <div class="comment__author-image"><img class="profile-pic" src="http://fillmurray.com/100/100"/></div> <div class="comment"> <div class="comment__author-name"><a href=""> <h5>Comment Author</h5></a></div> <div class="comment__text"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum inventore, numquam odio, iusto magni aperiam nemo sit sint dolore incidunt eos quaerat eum laborum, possimus sapiente repellendus. Eveniet, pariatur, error.</p> </div> <div class="comment__text--meta"><a href=""> <p><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp; 2</p></a><a href=""> <p><i class="fa fa-arrow-up" aria-hidden="true"></i>&nbsp; 1</p></a></div> </div> </div> </section>
</article>
</body>
</html>

System Fonts Can Be Beautiful - Script Codes CSS Codes

body { font-family: "Georgia", serif; color: #222; font-size: 20px; position: relative;
}
.main-article { max-width: 800px; margin: auto;
}
h1 { font-weight: normal; font-size: 3em; text-transform: capitalize; color: #444;
}
h2 { font-weight: normal; font-size: 2em;
}
h3 { font-weight: normal; font-size: 2em;
}
p { line-height: 1.5em;
}
.lead { font-style: italic; font-size: 1.5em; color: #888; line-height: 1.3em; margin: 1.5em 0;
}
.byline { font-size: 0.7em; margin-bottom: 4em; font-family: "Trebuchet MS", Trebuchet MS, sans-serif; text-transform: uppercase; line-height: 1.7;
}
.byline a { color: #999;
}
.byline a:hover { color: #777;
}
.section-heading { border-bottom: 1px solid; padding-bottom: 10px; margin: 30px 0;
}
.site-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; background-color: #f9f9f9; width: 100%; margin-top: 0; margin-bottom: 60px; color: #444;
}
.site-nav .site-title { margin: 0; font-size: 1.5em;
}
.site-nav li:first-child { text-transform: uppercase;
}
.site-nav a { color: #444; text-decoration: none;
}
.site-nav a:hover { color: #777;
}
@media screen and (min-width: 475px) { .site-title { margin: 0; font-size: 2.5em; padding-left: 20px; }
}
.main-nav { font-size: 0.7em;
}
.main-nav ul { list-style: none; padding: 0; display: flex;
}
.main-nav ul li { margin: 0 7px;
}
.main-nav ul li:first-child { margin-left: 0;
}
@media screen and (min-width: 475px) { .main-nav { font-size: 1em; padding: 0 20px; } .main-nav ul li { margin: 0 10px; }
}
@media screen and (max-width: 475px) { .main-article h1 { font-size: 2em; } .main-article h2 { font-size: 1.2em; }
}
.profile-pic { border-radius: 50%; margin-right: 20px; padding: 5px; border: 1px solid #ddd; margin-bottom: 15px;
}
@media screen and (min-width: 475px) { .profile-pic { margin-bottom: 0; }
}
.author-bio { display: flex; flex-direction: column; align-items: center; background-color: #f9f9f9; padding: 15px 10px; border: 1px solid #eee; margin: 60px 0 80px; font-family: "Trebuchet MS", Trebuchet MS, sans-serif; text-align: center;
}
@media screen and (min-width: 475px) { .author-bio { flex-direction: row; text-align: left; }
}
.author-bio-text { color: #777; flex: 2; font-size: 0.8em;
}
.author-bio-text p { padding: 0 0 10px; margin: 0;
}
.author-bio-text .author-bio-name { font-weight: bold;
}
.social-icons { display: flex; font-size: 1.5em;
}
.social-icons p { padding: 10px 20px; margin: 0;
}
.social-icons a { color: #999;
}
.social-icons a:hover { color: #777;
}
@media screen and (min-width: 475px) { .social-icons { flex-direction: column; flex: 0 1 50px; border-left: 1px solid #ddd; margin-left: 10px; font-size: inherit; } .social-icons p { padding: 10px; margin: 0; text-align: center; } .social-icons a { color: #999; } .social-icons a:hover { color: #777; }
}
.comments__meta { display: flex; justify-content: space-around; align-items: flex-start; font-family: "Trebuchet MS", Trebuchet MS, sans-serif; font-size: 0.8em; color: #999;
}
.comments__meta span { display: none;
}
.comments__meta p { margin: 0;
}
@media screen and (min-width: 475px) { .comments__meta { justify-content: flex-start; } .comments__meta span { display: inline-block; }
}
.comment__group { font-size: 0.9em; margin: 60px 0; color: #777; font-weight: normal; text-align: center;
}
@media screen and (min-width: 475px) { .comment__group { display: flex; text-align: left; }
}
.comment__author-name a { color: #444; text-decoration: none;
}
.comment__author-name a:hover { text-decoration: underline;
}
.comment__author-name h5 { padding: 0; margin: 0; font-weight: normal; font-size: 1em;
}
.comment__text { margin-top: 10px; font-size: 0.9em;
}
.comment__text p { margin: 0; padding: 0; line-height: 1.4; word-spacing: 1px; margin-bottom: 1em;
}
.comment__text p:last-child { margin-bottom: 0;
}
@media screen and (min-width: 475px) { .comment__text { text-align: left; }
}
.comment__text--meta { display: flex; justify-content: center; align-items: center; font-size: 0.8em; font-family: "Trebuchet MS", Trebuchet MS, sans-serif;
}
.comment__text--meta p { margin-right: 15px;
}
.comment__text--meta a { color: #999; text-decoration: none;
}
.comment__text--meta a:hover { color: #444;
}
@media screen and (min-width: 475px) { .comment__text--meta { justify-content: flex-start; }
}
@media screen and (min-width: 475px) { .comment__indented { margin-left: 7%; margin-top: -10px; }
}
System Fonts Can Be Beautiful - Script Codes
System Fonts Can Be Beautiful - Script Codes
Home Page Home
Developer Brian Haferkamp
Username brianhaferkamp
Uploaded October 10, 2022
Rating 4.5
Size 7,239 Kb
Views 8,096
Do you need developer help for System Fonts Can Be Beautiful?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian Haferkamp (brianhaferkamp) Script Codes
Name
Emoji-Driven Survey
Creating a CSS Flexbox Grid
RADIOLOGY
Brutal, Bro
Follow Your Heart
Brutalism Web Design School
Gradient Transitions Between Sections
Travel Blog Design with Sticky Nav and Sidebar
2-Up Magazine Layout
Full-Width Hero with Image Using Flexbox
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!