Fluid typography

Developer
Dima
Size
3,929 Kb
Views
22,264
  1. Fluid typography Previews
  2. Fluid typography HTML Codes
  3. Fluid typography CSS Codes

How do I make an fluid typography?

Fluid typography with vh and vw units. What is a fluid typography? How do you make a fluid typography? This script and codes were developed by Dima on 25 September 2022, Sunday.

Fluid typography Previews
IQ Test

Fluid typography - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fluid typography</title> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700,300|Roboto:100,300|Rubik:900,700,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <div class="nav"><a class="home" href=""> <svg width="6em" height="6em"> <circle cx="3em" cy="3em" r="3em" fill="#FFF2E9"></circle> <text text-anchor="middle" x="50%" y="50%" dy=".4em" fill="#FFF" font-size="3.4em">Z</text> </svg></a> <nav><a href="#">Work</a><a href="#">About</a><a href="#">Contact</a> </nav> </div> <div class="caption"> <h1>If it</h1> <h2>has a screen, we’re on it.</h2> <p>We work with businesses of all shapes and sizes to help bring ideas to life across all of the devices in our lives</p> </div> <div class="list"> <div class="feature"> <h3>Lorem ipsum dolor</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio error fugiat voluptates mollitia nihil illum, quos aperiam cupiditate at sint molestiae. Accusamus libero illum, voluptates fugiat repudiandae consectetur unde necessitatibus!</p> </div> <div class="feature"> <h3>Lorem ipsum dolor</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio error fugiat voluptates mollitia nihil illum, quos aperiam cupiditate at sint molestiae. Accusamus libero illum, voluptates fugiat repudiandae consectetur unde necessitatibus!</p> </div> <div class="feature"> <h3>Lorem ipsum dolor</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio error fugiat voluptates mollitia nihil illum, quos aperiam cupiditate at sint molestiae. Accusamus libero illum, voluptates fugiat repudiandae consectetur unde necessitatibus!</p> </div> </div>
</header>
</body>
</html>

Fluid typography - Script Codes CSS Codes

/*
Roboto+Condensed:700,300|Roboto:100,300|Rubik:900,700,300
font-family: 'Rubik', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
*/
:root { font-size: calc(0.8vw + 1vh + 0.2vmin);
}
body { margin: 0; font: 300 1em/1.4 'Roboto', sans-serif;
}
@media (min-width: 920px) { body { font-size: 0.8rem; }
}
p { color: #808080;
}
h1,
h2,
h3 { font-family: 'Rubik', sans-serif;
}
.nav { margin: 1em 0 2em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.nav nav { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.nav nav a { font-size: 1.2em; padding: 0 2em 1em; color: #444; font-family: 'Rubik', sans-serif; font-weight: 700;
}
.home:hover circle { -webkit-transition: fill 0.5s; transition: fill 0.5s; fill: #3dafca;
}
header { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; padding: 0 4%; margin: auto; max-width: 1280px;
}
.caption { font-size: 1.8em; margin-bottom: 0.5em;
}
.caption h1,
.caption h2 { margin: 0;
}
.caption h2 { line-height: 1;
}
.list { -ms-flex-item-align: end; align-self: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
@media (max-width: 540px) { .list { -ms-flex-wrap: wrap; flex-wrap: wrap; }
}
.list h3 { color: #4d4d4d;
}
.list .feature { padding: 0 1.4em; border-left: 1px solid #8995a2; margin-bottom: 2em;
}
Fluid typography - Script Codes
Fluid typography - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 25, 2022
Rating 3
Size 3,929 Kb
Views 22,264
Do you need developer help for Fluid typography?

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!

Dima (dimaZubkov) Script Codes
Name
A Pen by Dima
Burger nav
Codrops HoverEffectIdeas
Ken Burns Effect
Ken Burns effect CSS only
Section scroll
Angular T-shirt shop
Responsive typography harmony
Css masonry
Star Rating
Create amazing SEO content 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!