[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:fluid-typography-with-clamp":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":627,"title":628,"slug":629,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":85,"cornerstone":52,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":742,"quiz":5,"exercises":766,"published_at":5,"updated_at":781,"prev":782,"next":783},"\u003Ch2 id=\"fluid-typography-with-clamp-complete-guide\">Fluid Typography with clamp(): Complete Guide\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: fluid typography.\u003C\u002Fstrong> Fluid typography means text that grows smoothly with the screen instead of jumping at breakpoints. With \u003Ccode>clamp()\u003C\u002Fcode> you set a minimum size, a preferred size that scales with the viewport and a maximum size. In this lesson you will learn the formula behind the preferred value, how to keep fluid text accessible when users zoom, how to build a complete fluid type scale with custom properties, how to choose line height and line length, and how to use container units for component-based typography.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>fluid typography clamp, responsive font size, clamp rem vw formula, fluid type scale, modular scale CSS, Utopia fluid type, WCAG 1.4.4 resize text, browser zoom accessibility, line-height unitless, measure 65ch, fluid spacing, text-wrap balance, cqi container units typography, variable fonts, font-display swap, vw units problem, type scale CSS variables, responsive headings.\u003C\u002Fp>\u003Ch2 id=\"1-from-breakpoints-to-fluid-type\">1. From Breakpoints to Fluid Type\u003C\u002Fh2>\u003Cp>The old method sets the font size at each breakpoint: 16px, then 18px, then 20px. The text jumps suddenly at each step. Fluid typography calculates the size continuously between a small screen and a large screen, so one line of CSS replaces several media queries and every screen width gets a well-proportioned size.\u003C\u002Fp>\u003Ch2 id=\"2-the-clamp-formula\">2. The clamp() Formula\u003C\u002Fh2>\u003Cp>\u003Ccode>font-size: clamp(min, preferred, max)\u003C\u002Fcode>. The preferred value is a line: \u003Ccode>intercept + slope * 100vw\u003C\u002Fcode>. To move from size \u003Cem>minSize\u003C\u002Fem> at viewport \u003Cem>minVw\u003C\u002Fem> to size \u003Cem>maxSize\u003C\u002Fem> at viewport \u003Cem>maxVw\u003C\u002Fem> (all in pixels):\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>slope\u003C\u002Fstrong> = (maxSize - minSize) \u002F (maxVw - minVw)\u003C\u002Fli>\u003Cli>\u003Cstrong>intercept\u003C\u002Fstrong> = minSize - slope * minVw\u003C\u002Fli>\u003Cli>preferred = \u003Ccode>intercept (in rem) + (slope * 100) vw\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Example: 16px at 320px and 20px at 1200px gives slope 0.004545 and intercept 14.55px, so \u003Ccode>clamp(1rem, 0.909rem + 0.4545vw, 1.25rem)\u003C\u002Fcode>. You can use the JavaScript generator in the last example to calculate it for any pair of values.\u003C\u002Fp>\u003Ch2 id=\"3-accessibility-keep-text-zoomable\">3. Accessibility: Keep Text Zoomable\u003C\u002Fh2>\u003Cp>WCAG 1.4.4 requires that text can be resized to 200 percent without loss of content. A font size made only of \u003Ccode>vw\u003C\u002Fcode> units does not react to browser zoom in the expected way, because zoom changes the viewport width in CSS pixels only slightly for the text. Always include a \u003Ccode>rem\u003C\u002Fcode> part in the preferred value, and use \u003Ccode>rem\u003C\u002Fcode> for the minimum and maximum. As a rule of thumb, keep the maximum no larger than about 2.5 times the minimum. Test by zooming to 200 percent and by changing the default font size in the browser settings. Also keep \u003Ccode>html { font-size: 100% }\u003C\u002Fcode> so the user setting is respected, and never set the root size in pixels.\u003C\u002Fp>\u003Ch2 id=\"4-a-fluid-type-scale\">4. A Fluid Type Scale\u003C\u002Fh2>\u003Cp>A type scale is a set of sizes related by a ratio, for example 1.25 (major third). Use a smaller ratio on small screens, such as 1.2, and a larger ratio on big screens, such as 1.25, so headings have more contrast on large displays. Define the steps as custom properties: \u003Ccode>--step--1\u003C\u002Fcode> for small print, \u003Ccode>--step-0\u003C\u002Fcode> for body text, and \u003Ccode>--step-1\u003C\u002Fcode> to \u003Ccode>--step-5\u003C\u002Fcode> for headings. Then write \u003Ccode>h1 { font-size: var(--step-5); }\u003C\u002Fcode>. The scale is easy to change in one place, and all sizes stay in harmony.\u003C\u002Fp>\u003Ch2 id=\"5-line-height\">5. Line Height\u003C\u002Fh2>\u003Cul>\u003Cli>Use a \u003Cstrong>unitless\u003C\u002Fstrong> \u003Ccode>line-height\u003C\u002Fcode> so it scales with each element font size.\u003C\u002Fli>\u003Cli>Body text: 1.5 to 1.7.\u003C\u002Fli>\u003Cli>Large headings need less: 1.05 to 1.25, because big text looks too loose with a large line height.\u003C\u002Fli>\u003Cli>Small text such as captions may need a little more, about 1.6.\u003C\u002Fli>\u003Cli>WCAG text spacing guidance expects that users can set line height to 1.5 without breaking the layout, so avoid fixed heights on text containers.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-line-length-measure\">6. Line Length (Measure)\u003C\u002Fh2>\u003Cp>A comfortable line has about 45 to 75 characters. Use the \u003Ccode>ch\u003C\u002Fcode> unit: \u003Ccode>max-width: 65ch\u003C\u002Fcode>. On mobile the screen width itself limits the line, and on desktop the max-width does. Combine \u003Ccode>ch\u003C\u002Fcode> with fluid text and the line length stays readable at every size. Remember that \u003Ccode>ch\u003C\u002Fcode> depends on the font, so test with your real font.\u003C\u002Fp>\u003Ch2 id=\"7-fluid-spacing\">7. Fluid Spacing\u003C\u002Fh2>\u003Cp>Apply the same idea to spacing so text and space stay in proportion: \u003Ccode>--space-m: clamp(1rem, 0.8rem + 1vw, 2rem)\u003C\u002Fcode>. Use it for padding, margin and gap. Build small tokens such as \u003Ccode>--space-s\u003C\u002Fcode>, \u003Ccode>--space-m\u003C\u002Fcode> and \u003Ccode>--space-l\u003C\u002Fcode>, and multiply them for bigger gaps with \u003Ccode>calc()\u003C\u002Fcode>. Another useful option is the \u003Ccode>em\u003C\u002Fcode> unit for spacing inside components: padding in \u003Ccode>em\u003C\u002Fcode> follows the component font size.\u003C\u002Fp>\u003Ch2 id=\"8-container-based-fluid-type\">8. Container-Based Fluid Type\u003C\u002Fh2>\u003Cp>Viewport units follow the screen, but a card in a narrow sidebar on a big screen needs smaller text. Container query units solve this: set \u003Ccode>container-type: inline-size\u003C\u002Fcode> on the parent and use \u003Ccode>font-size: clamp(1.25rem, 6cqi, 2.5rem)\u003C\u002Fcode> on the child. \u003Ccode>1cqi\u003C\u002Fcode> is 1 percent of the container inline size. Always keep a rem part or fixed minimum and maximum so the text still respects zoom.\u003C\u002Fp>\u003Ch2 id=\"9-polish-the-typography\">9. Polish the Typography\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>text-wrap: balance\u003C\u002Fcode> for headings creates even line lengths. \u003Ccode>text-wrap: pretty\u003C\u002Fcode> for paragraphs avoids a lonely last word. Both are progressive enhancements.\u003C\u002Fli>\u003Cli>\u003Ccode>font-display: swap\u003C\u002Fcode> in \u003Ccode>@font-face\u003C\u002Fcode> shows fallback text immediately while the web font loads.\u003C\u002Fli>\u003Cli>Variable fonts allow a range of weights and widths in one file, for example \u003Ccode>font-weight: 100 900\u003C\u002Fcode>, and can change weight smoothly at different sizes.\u003C\u002Fli>\u003Cli>\u003Ccode>font-size-adjust\u003C\u002Fcode> helps the fallback font match the x-height of the web font, which reduces layout jump.\u003C\u002Fli>\u003Cli>Use \u003Ccode>overflow-wrap: break-word\u003C\u002Fcode> for long words and URLs.\u003C\u002Fli>\u003Cli>Use \u003Ccode>hyphens: auto\u003C\u002Fcode> with a \u003Ccode>lang\u003C\u002Fcode> attribute on narrow columns of justified or long text.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-testing-checklist\">10. Testing Checklist\u003C\u002Fh2>\u003Col>\u003Cli>Resize from 320px to 1600px and watch the headings and body text.\u003C\u002Fli>\u003Cli>Zoom to 200 percent and to 400 percent. Text must grow and nothing may be cut off.\u003C\u002Fli>\u003Cli>Change the default font size in the browser settings.\u003C\u002Fli>\u003Cli>Check the longest heading and the longest word.\u003C\u002Fli>\u003Cli>Check contrast for both small and large text.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"11-common-mistakes\">11. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using only \u003Ccode>vw\u003C\u002Fcode> for font size, which breaks accessibility.\u003C\u002Fli>\u003Cli>Writing clamp arguments in the wrong order.\u003C\u002Fli>\u003Cli>Making the maximum much more than 2.5 times the minimum.\u003C\u002Fli>\u003Cli>Setting \u003Ccode>html { font-size: 62.5% }\u003C\u002Fcode> or pixel sizes and hurting user preferences.\u003C\u002Fli>\u003Cli>Using a fixed line-height in pixels on text that scales.\u003C\u002Fli>\u003Cli>Fluid body text that changes too fast, which feels unstable. Headings can change more than body text.\u003C\u002Fli>\u003Cli>Forgetting a measure, so lines become too long on large screens.\u003C\u002Fli>\u003Cli>Using fluid type inside a narrow container while basing it on the viewport instead of the container.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Use clamp() with a rem-based preferred value so text scales smoothly and still zooms, build a type scale with custom properties, use unitless line height, limit line length with ch, make spacing fluid too, consider container units for components, and always test with zoom and larger default font sizes.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font-family: system-ui, sans-serif; }\n  section { padding: clamp(1rem, 4vw, 3rem); background: #eef2f7; }\n  h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.1; margin: 0 0 0.5rem; }\n  p { font-size: clamp(1rem, 0.909rem + 0.4545vw, 1.25rem); line-height: 1.6; max-width: 65ch; margin: 0; }\n<\u002Fstyle>\n<section>\n  <h1>Fluid heading and body text<\u002Fh1>\n  <p>Resize the preview. The heading and this paragraph grow smoothly between a minimum and a maximum size, without any media query.<\u002Fp>\n<\u002Fsection>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    --step--1: clamp(0.8rem, 0.727rem + 0.364vw, 1rem);\n    --step-0: clamp(1rem, 0.909rem + 0.4545vw, 1.25rem);\n    --step-1: clamp(1.2rem, 1.068rem + 0.659vw, 1.5625rem);\n    --step-2: clamp(1.44rem, 1.253rem + 0.933vw, 1.953rem);\n    --step-3: clamp(1.728rem, 1.469rem + 1.297vw, 2.441rem);\n    --step-4: clamp(2.074rem, 1.718rem + 1.778vw, 3.052rem);\n    --step-5: clamp(2.488rem, 2.006rem + 2.413vw, 3.815rem);\n  }\n  body { font: var(--step-0)\u002F1.6 system-ui, sans-serif; padding: 16px; margin: 0; }\n  .s-1 { font-size: var(--step--1); }\n  h1 { font-size: var(--step-5); line-height: 1.05; margin: 0 0 .5rem; }\n  h2 { font-size: var(--step-3); line-height: 1.15; margin: 1rem 0 .5rem; }\n  h3 { font-size: var(--step-1); line-height: 1.25; margin: 1rem 0 .5rem; }\n<\u002Fstyle>\n<h1>Step 5 heading<\u002Fh1>\n<h2>Step 3 heading<\u002Fh2>\n<h3>Step 1 heading<\u002Fh3>\n<p>Step 0 body text uses the base of the scale.<\u002Fp>\n<p class='s-1'>Step -1 small print for captions and notes.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { color-scheme: light; }\n  body { margin: 0; padding: clamp(1rem, 4vw, 3rem); font-family: Georgia, serif; font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.65; }\n  article { max-width: 65ch; }\n  h1 { font-size: clamp(2rem, 1.2rem + 3.5vw, 3.75rem); line-height: 1.08; text-wrap: balance; margin: 0 0 1rem; }\n  p { text-wrap: pretty; overflow-wrap: break-word; margin: 0 0 1em; }\n  .lead { font-size: 1.2em; line-height: 1.5; color: #445; }\n<\u002Fstyle>\n<article>\n  <h1>Comfortable reading needs size, spacing and a limited line length<\u002Fh1>\n  <p class='lead'>Lead paragraph with a larger size and a slightly smaller unitless line height.<\u002Fp>\n  <p>The article is limited to 65 characters per line with the ch unit. The heading uses a tight line height and balanced wrapping, while the paragraphs use a relaxed line height.<\u002Fp>\n<\u002Farticle>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);\n    --space-m: clamp(1rem, 0.8rem + 1vw, 2rem);\n    --space-l: clamp(2rem, 1.5rem + 2.5vw, 4rem);\n  }\n  * { box-sizing: border-box; }\n  body { margin: 0; font: clamp(1rem, 0.95rem + 0.3vw, 1.2rem)\u002F1.6 system-ui, sans-serif; }\n  section { padding-block: var(--space-l); padding-inline: var(--space-m); background: #eef2f7; }\n  .cards { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: var(--space-m); }\n  .card { background: #fff; padding: var(--space-m); border-radius: 12px; }\n  h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }\n<\u002Fstyle>\n<section>\n  <h2>Fluid spacing tokens<\u002Fh2>\n  <div class='cards'><div class='card'>One<\u002Fdiv><div class='card'>Two<\u002Fdiv><div class='card'>Three<\u002Fdiv><\u002Fdiv>\n<\u002Fsection>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .wrap { container-type: inline-size; resize: horizontal; overflow: auto; width: 420px; max-width: 100%; border: 2px dashed #888; padding: 12px; }\n  .wrap h2 { font-size: clamp(1.25rem, 7cqi, 2.75rem); line-height: 1.1; margin: 0 0 8px; text-wrap: balance; }\n  .wrap p { font-size: clamp(0.9rem, 3.2cqi, 1.25rem); margin: 0; }\n<\u002Fstyle>\n<p>Drag the bottom right corner of the dashed box. The text follows the container width, not the screen.<\u002Fp>\n<div class='wrap'>\n  <h2>Container based fluid type<\u002Fh2>\n  <p>1cqi is 1 percent of the width of the container.<\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font-family: system-ui, sans-serif; padding: 16px; }\n  .row { padding: 12px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 10px; }\n  .bad { font-size: 4vw; margin: 0; }\n  .good { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); margin: 0; }\n  small { color: #555; }\n<\u002Fstyle>\n<div class='row'><p class='bad'>vw only: 4vw<\u002Fp><small>Has no minimum, becomes tiny on phones and ignores the user font settings.<\u002Fsmall><\u002Fdiv>\n<div class='row'><p class='good'>clamp with rem<\u002Fp><small>Has limits and a rem part, so browser zoom and default font size still work.<\u002Fsmall><\u002Fdiv>\n<p>Try browser zoom at 200 percent: the clamp version grows with the zoom, the vw version does not scale as expected.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>function fluid(minPx, maxPx, minVw, maxVw) {\n  var slope = (maxPx - minPx) \u002F (maxVw - minVw);\n  var intercept = minPx - slope * minVw;\n  function rem(px) { return (px \u002F 16).toFixed(3); }\n  return 'clamp(' + rem(minPx) + 'rem, ' + rem(intercept) + 'rem + ' + (slope * 100).toFixed(4) + 'vw, ' + rem(maxPx) + 'rem)';\n}\n\nvar minVw = 320;\nvar maxVw = 1200;\nvar minBase = 16;\nvar maxBase = 20;\nvar minRatio = 1.2;\nvar maxRatio = 1.25;\nvar steps = [-1, 0, 1, 2, 3, 4, 5];\n\nsteps.forEach(function (n) {\n  var minSize = minBase * Math.pow(minRatio, n);\n  var maxSize = maxBase * Math.pow(maxRatio, n);\n  console.log('--step-' + n + ': ' + fluid(minSize, maxSize, minVw, maxVw) + ';');\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":611,"slug":612},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): Type Scale, rem, vw and Zoom","Build fluid typography with CSS clamp(): formula, fluid type scale with custom properties, line-height, measure, fluid spacing, container units and accessible zoom.",[686,694,698,702,706,710,714,718,722,726,730,734,738],{"id":687,"text":688,"level":12,"children":689},"fluid-typography-with-clamp-complete-guide","Fluid Typography with clamp(): Complete Guide",[690],{"id":691,"text":692,"level":57,"children":693},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",[],{"id":695,"text":696,"level":12,"children":697},"1-from-breakpoints-to-fluid-type","1. From Breakpoints to Fluid Type",[],{"id":699,"text":700,"level":12,"children":701},"2-the-clamp-formula","2. The clamp() Formula",[],{"id":703,"text":704,"level":12,"children":705},"3-accessibility-keep-text-zoomable","3. Accessibility: Keep Text Zoomable",[],{"id":707,"text":708,"level":12,"children":709},"4-a-fluid-type-scale","4. A Fluid Type Scale",[],{"id":711,"text":712,"level":12,"children":713},"5-line-height","5. Line Height",[],{"id":715,"text":716,"level":12,"children":717},"6-line-length-measure","6. Line Length (Measure)",[],{"id":719,"text":720,"level":12,"children":721},"7-fluid-spacing","7. Fluid Spacing",[],{"id":723,"text":724,"level":12,"children":725},"8-container-based-fluid-type","8. Container-Based Fluid Type",[],{"id":727,"text":728,"level":12,"children":729},"9-polish-the-typography","9. Polish the Typography",[],{"id":731,"text":732,"level":12,"children":733},"10-testing-checklist","10. Testing Checklist",[],{"id":735,"text":736,"level":12,"children":737},"11-common-mistakes","11. Common Mistakes",[],{"id":739,"text":740,"level":12,"children":741},"key-takeaways","Key Takeaways",[],[743,747,750,753,756,759,762],{"id":744,"language":16,"code":745,"is_editable":746},551,"\u003Cstyle>\n  body { margin: 0; font-family: system-ui, sans-serif; }\n  section { padding: clamp(1rem, 4vw, 3rem); background: #eef2f7; }\n  h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.1; margin: 0 0 0.5rem; }\n  p { font-size: clamp(1rem, 0.909rem + 0.4545vw, 1.25rem); line-height: 1.6; max-width: 65ch; margin: 0; }\n\u003C\u002Fstyle>\n\u003Csection>\n  \u003Ch1>Fluid heading and body text\u003C\u002Fh1>\n  \u003Cp>Resize the preview. The heading and this paragraph grow smoothly between a minimum and a maximum size, without any media query.\u003C\u002Fp>\n\u003C\u002Fsection>",true,{"id":748,"language":16,"code":749,"is_editable":746},552,"\u003Cstyle>\n  :root {\n    --step--1: clamp(0.8rem, 0.727rem + 0.364vw, 1rem);\n    --step-0: clamp(1rem, 0.909rem + 0.4545vw, 1.25rem);\n    --step-1: clamp(1.2rem, 1.068rem + 0.659vw, 1.5625rem);\n    --step-2: clamp(1.44rem, 1.253rem + 0.933vw, 1.953rem);\n    --step-3: clamp(1.728rem, 1.469rem + 1.297vw, 2.441rem);\n    --step-4: clamp(2.074rem, 1.718rem + 1.778vw, 3.052rem);\n    --step-5: clamp(2.488rem, 2.006rem + 2.413vw, 3.815rem);\n  }\n  body { font: var(--step-0)\u002F1.6 system-ui, sans-serif; padding: 16px; margin: 0; }\n  .s-1 { font-size: var(--step--1); }\n  h1 { font-size: var(--step-5); line-height: 1.05; margin: 0 0 .5rem; }\n  h2 { font-size: var(--step-3); line-height: 1.15; margin: 1rem 0 .5rem; }\n  h3 { font-size: var(--step-1); line-height: 1.25; margin: 1rem 0 .5rem; }\n\u003C\u002Fstyle>\n\u003Ch1>Step 5 heading\u003C\u002Fh1>\n\u003Ch2>Step 3 heading\u003C\u002Fh2>\n\u003Ch3>Step 1 heading\u003C\u002Fh3>\n\u003Cp>Step 0 body text uses the base of the scale.\u003C\u002Fp>\n\u003Cp class='s-1'>Step -1 small print for captions and notes.\u003C\u002Fp>",{"id":751,"language":16,"code":752,"is_editable":746},553,"\u003Cstyle>\n  :root { color-scheme: light; }\n  body { margin: 0; padding: clamp(1rem, 4vw, 3rem); font-family: Georgia, serif; font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.65; }\n  article { max-width: 65ch; }\n  h1 { font-size: clamp(2rem, 1.2rem + 3.5vw, 3.75rem); line-height: 1.08; text-wrap: balance; margin: 0 0 1rem; }\n  p { text-wrap: pretty; overflow-wrap: break-word; margin: 0 0 1em; }\n  .lead { font-size: 1.2em; line-height: 1.5; color: #445; }\n\u003C\u002Fstyle>\n\u003Carticle>\n  \u003Ch1>Comfortable reading needs size, spacing and a limited line length\u003C\u002Fh1>\n  \u003Cp class='lead'>Lead paragraph with a larger size and a slightly smaller unitless line height.\u003C\u002Fp>\n  \u003Cp>The article is limited to 65 characters per line with the ch unit. The heading uses a tight line height and balanced wrapping, while the paragraphs use a relaxed line height.\u003C\u002Fp>\n\u003C\u002Farticle>",{"id":754,"language":16,"code":755,"is_editable":746},554,"\u003Cstyle>\n  :root {\n    --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);\n    --space-m: clamp(1rem, 0.8rem + 1vw, 2rem);\n    --space-l: clamp(2rem, 1.5rem + 2.5vw, 4rem);\n  }\n  * { box-sizing: border-box; }\n  body { margin: 0; font: clamp(1rem, 0.95rem + 0.3vw, 1.2rem)\u002F1.6 system-ui, sans-serif; }\n  section { padding-block: var(--space-l); padding-inline: var(--space-m); background: #eef2f7; }\n  .cards { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: var(--space-m); }\n  .card { background: #fff; padding: var(--space-m); border-radius: 12px; }\n  h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }\n\u003C\u002Fstyle>\n\u003Csection>\n  \u003Ch2>Fluid spacing tokens\u003C\u002Fh2>\n  \u003Cdiv class='cards'>\u003Cdiv class='card'>One\u003C\u002Fdiv>\u003Cdiv class='card'>Two\u003C\u002Fdiv>\u003Cdiv class='card'>Three\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>",{"id":757,"language":16,"code":758,"is_editable":746},555,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .wrap { container-type: inline-size; resize: horizontal; overflow: auto; width: 420px; max-width: 100%; border: 2px dashed #888; padding: 12px; }\n  .wrap h2 { font-size: clamp(1.25rem, 7cqi, 2.75rem); line-height: 1.1; margin: 0 0 8px; text-wrap: balance; }\n  .wrap p { font-size: clamp(0.9rem, 3.2cqi, 1.25rem); margin: 0; }\n\u003C\u002Fstyle>\n\u003Cp>Drag the bottom right corner of the dashed box. The text follows the container width, not the screen.\u003C\u002Fp>\n\u003Cdiv class='wrap'>\n  \u003Ch2>Container based fluid type\u003C\u002Fh2>\n  \u003Cp>1cqi is 1 percent of the width of the container.\u003C\u002Fp>\n\u003C\u002Fdiv>",{"id":760,"language":16,"code":761,"is_editable":746},556,"\u003Cstyle>\n  body { margin: 0; font-family: system-ui, sans-serif; padding: 16px; }\n  .row { padding: 12px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 10px; }\n  .bad { font-size: 4vw; margin: 0; }\n  .good { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); margin: 0; }\n  small { color: #555; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\u003Cp class='bad'>vw only: 4vw\u003C\u002Fp>\u003Csmall>Has no minimum, becomes tiny on phones and ignores the user font settings.\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cdiv class='row'>\u003Cp class='good'>clamp with rem\u003C\u002Fp>\u003Csmall>Has limits and a rem part, so browser zoom and default font size still work.\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cp>Try browser zoom at 200 percent: the clamp version grows with the zoom, the vw version does not scale as expected.\u003C\u002Fp>",{"id":763,"language":764,"code":765,"is_editable":746},557,"javascript","function fluid(minPx, maxPx, minVw, maxVw) {\n  var slope = (maxPx - minPx) \u002F (maxVw - minVw);\n  var intercept = minPx - slope * minVw;\n  function rem(px) { return (px \u002F 16).toFixed(3); }\n  return 'clamp(' + rem(minPx) + 'rem, ' + rem(intercept) + 'rem + ' + (slope * 100).toFixed(4) + 'vw, ' + rem(maxPx) + 'rem)';\n}\n\nvar minVw = 320;\nvar maxVw = 1200;\nvar minBase = 16;\nvar maxBase = 20;\nvar minRatio = 1.2;\nvar maxRatio = 1.25;\nvar steps = [-1, 0, 1, 2, 3, 4, 5];\n\nsteps.forEach(function (n) {\n  var minSize = minBase * Math.pow(minRatio, n);\n  var maxSize = maxBase * Math.pow(maxRatio, n);\n  console.log('--step-' + n + ': ' + fluid(minSize, maxSize, minVw, maxVw) + ';');\n});",[767,774],{"id":768,"title":769,"slug":770,"prompt":771,"starter_code":772,"expected_output":773,"language":16,"order_index":23},199,"Create a Fluid Type Scale","create-fluid-type-scale","Define four custom properties (--step-0, --step-1, --step-2, --step-3) with clamp(). Each preferred value must include a rem part. Use them for the paragraph, h3, h2 and h1. Give headings a unitless line-height below 1.3 and limit the paragraph to 65ch.","\u003Cstyle>\n  :root { \u002F* define the scale here *\u002F }\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n\u003C\u002Fstyle>\n\u003Ch1>Main heading\u003C\u002Fh1>\n\u003Ch2>Section heading\u003C\u002Fh2>\n\u003Ch3>Small heading\u003C\u002Fh3>\n\u003Cp>Body paragraph for the fluid type scale exercise. Resize the preview to test it.\u003C\u002Fp>","Four --step variables using clamp(minrem, rem + vw, maxrem), headings using var(--step-n) with line-height under 1.3, and the paragraph with max-width: 65ch",{"id":775,"title":776,"slug":777,"prompt":778,"starter_code":779,"expected_output":780,"language":16,"order_index":12},200,"Fix a vw-Only Heading","fix-vw-only-heading","This heading uses only viewport units, so it is tiny on phones and ignores browser zoom. Replace it with clamp() so it is never smaller than 1.75rem, never larger than 4rem, and includes a rem part in the preferred value. Also add text-wrap: balance.","\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  h1 { font-size: 5vw; margin: 0; }\n\u003C\u002Fstyle>\n\u003Ch1>Fluid headings should respect user zoom\u003C\u002Fh1>","h1 uses clamp(1.75rem, X rem + Y vw, 4rem) with a rem term in the middle value and text-wrap: balance","2026-09-30T18:35:36+00:00",{"id":623,"slug":625,"title":624},{"id":631,"slug":633,"title":632}]