Fluid Typography

Developer
Kevin
Size
2,797 Kb
Views
18,216
  1. Fluid Typography Previews
  2. Fluid Typography HTML Codes
  3. Fluid Typography CSS Codes

How do I make an fluid typography?

What is a fluid typography? How do you make a fluid typography? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Fluid Typography Previews
IQ Test

Fluid Typography - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fluid Typography</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Lorem Ipsum</h1> --> -->
<h2>Lorem Ipsum</h2>
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum</h4>
<h5>Lorem Ipsum</h5>
<h6>Lorem Ipsum</h6>
<p class="note">Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</body>
</html>

Fluid Typography - Script Codes CSS Codes

//Responsive Typography
//Variables
@small-screen: 460px;
@large-screen: 1129px;
@base-font-size: 14px;
@ratio: 1.618;
//Fluid type mixin
.font-size(@min-screen: 460px, @max-screen: 1129px, @base-font: 14px, @min-font, @max-font) { //Min font font-size: @min-font; @line-height-min: @min-font * @ratio * 1; line-height: @min-font * @ratio; @media screen and (min-width: unit((@min-screen / @base-font), ~"em")) { //The fluid font sizing calc @font-calc: calc( @min-font ~" + " unit(@max-font - @min-font) ~" * ((100vw - " unit((@min-screen / @base-font), ~"em") ~") /" unit( (@max-screen / @base-font) - (@min-screen / @base-font)) ~")"); font-size: @font-calc; //@line-height: @font-calc * @ratio * 1; line-height: @font-calc * @ratio; } @media screen and (min-width: unit((@max-screen / @base-font), ~"em")) { // Max-font font-size: @max-font; @line-height-max: @max-font * @ratio * 1; line-height: @max-font * @ratio; }
}
//h1
.type-jumbo() { .font-size(@small-screen, @large-screen, @base-font-size, 1.8em, 2.4em);
}
//h2
.type-largest() { .font-size(@small-screen, @large-screen, @base-font-size, 1.6em, 2.2em);
}
//h3
.type-larger() { .font-size(@small-screen, @large-screen, @base-font-size, 1.4em, 2em);
}
//h4
.type-large() { .font-size(@small-screen, @large-screen, @base-font-size, 1.2em, 1.8em);
}
//h5
.type-small() { .font-size(@small-screen, @large-screen, @base-font-size, 1em, 1.6em);
}
//h6
.type-smaller() { .font-size(@small-screen, @large-screen, @base-font-size, .8em, 1.4em);
}
//.note class
.type-smallest() { .font-size(@small-screen, @large-screen, @base-font-size, .6em, 1.2em);
}
//body
.type-body() { .font-size(@small-screen, @large-screen, @base-font-size, 1em, 1em);
}
///END OF MIXIN
html { font-size: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
.note { margin: 10px;
}
body { .type-body; font-family: 'Roboto';
}
h1 { .type-jumbo;
}
h2 { .type-largest;
}
h3 { .type-larger;
}
h4 { .type-large;
}
h5 { .type-small;
}
h6 { .type-smaller;
}
.note { .type-smallest;
}
Fluid Typography - Script Codes
Fluid Typography - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 2,797 Kb
Views 18,216
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!

Kevin (gnarfugh) Script Codes
Name
Slider
Hover icon link over image
Hamburger
Mess svg logo
Recommended class
React Scoreboard
Final responsive typography forever
Google Maps api
Old calculator
Flex dropdown nav
Create amazing video scripts 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!