Responsive Typography Techniques Online Class | LinkedIn Learning, formerly Lynda.com

<!DOCTYPE html> <html lang="en"> <head> <meta name="pageKey" content="d_learning_course_guest">  <meta name="locale" content="en_US"> <meta id="config" data-app-version="2.0.2217" data-call-tree-id="AAYn2mxQWDlaZz57VkuiHg==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="5511fffb-79e6-457b-8aaa-043dc20bffc3" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_guest;4OAlxXWYRvKjA7QAXvZUxA==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0"> <link rel="canonical" href="https://www.linkedin.com/learning/responsive-typography-techniques">     <link rel="manifest" href="/homepage-guest/manifest.json" crossorigin="use-credentials">  <script> function getDfd() {let yFn,nFn;const p=new Promise(function(y, n){yFn=y;nFn=n;});p.resolve=yFn;p.reject=nFn;return p;} window.lazyloader = getDfd(); window.tracking = getDfd(); window.impressionTracking = getDfd(); window.ingraphTracking = getDfd(); window.appDetection = getDfd(); window.pemTracking = getDfd(); </script>  <link rel="icon" href="https://static.licdn.com/aero-v1/sc/h/444zstxv7s91nepfm5et6ofge"> <title>Responsive Typography Techniques Online Class | LinkedIn Learning, formerly Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes."> <meta property="og:site_name" content="LinkedIn"> <meta name="twitter:site" content="@LI_Learning"> <meta name="twitter:card" content="summary"> <meta name="litmsProfileName" content="learning-guest-frontend"> <meta property="og:title" content="Responsive Typography Techniques Online Class | LinkedIn Learning, formerly Lynda.com"> <meta name="twitter:title" content="Responsive Typography Techniques Online Class | LinkedIn Learning, formerly Lynda.com"> <meta property="og:description" content="Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes."> <meta name="twitter:description" content="Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes">  <meta property="og:url" content="https://www.linkedin.com/learning/responsive-typography-techniques"> <meta property="og:type" content="website"> <meta name="clientSideIngraphs" content="1" data-gauge-metric-endpoint="/learning-guest/api/ingraphs/gauge" data-counter-metric-endpoint="/learning-guest/api/ingraphs/counter"> <link rel="stylesheet" href="https://static.licdn.com/aero-v1/sc/h/ccepec31u8riooiwchbtig8m0"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"Course","provider":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"publisher":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"hasCourseInstance":{"@type":"CourseInstance","courseMode":"online","courseWorkload":"PT2H9M44S","instructor":[{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"}]},"inLanguage":"en","name":"Responsive Typography Techniques","offers":[{"@type":"Offer","category":"Subscription"},{"@type":"Offer","category":"Paid","price":"349.99","priceCurrency":"HKD"}],"description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","image":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","creator":[{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"}],"author":[{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"}],"dateCreated":"2014-01-31","datePublished":"2014-01-31","thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","timeRequired":"PT2H9M44S","totalHistoricalEnrollment":11333,"url":"https://www.linkedin.com/learning/responsive-typography-techniques","about":[{"@type":"Thing","url":"https://www.linkedin.com/learning/topics/responsive-web-design","name":"Responsive Web Design"},{"@type":"Thing","url":"https://www.linkedin.com/learning/topics/web-typography","name":"Web Typography"}],"hasPart":[[{"@type":"VideoObject","name":"Welcome - Introduction","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT43S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/welcome"},{"@type":"VideoObject","name":"What you should know before watching this course - Introduction","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT43S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/what-you-should-know-before-watching-this-course"},{"@type":"VideoObject","name":"Using the exercise files - Introduction","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT34S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/using-the-exercise-files"},{"@type":"VideoObject","name":"Using challenges - Introduction","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT36S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/using-challenges"}],[{"@type":"VideoObject","name":"Exploring the goals of typography and responsive design - 1. Comparing and Choosing Web Fonts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT2M28S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/exploring-the-goals-of-typography-and-responsive-design"},{"@type":"VideoObject","name":"Identifying quality web fonts - 1. Comparing and Choosing Web Fonts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT6M8S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/identifying-quality-web-fonts"},{"@type":"VideoObject","name":"Matching fonts to chunks of text content - 1. Comparing and Choosing Web Fonts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT4M28S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/matching-fonts-to-chunks-of-text-content"},{"@type":"VideoObject","name":"Deciding between self-hosted and hosted fonts - 1. Comparing and Choosing Web Fonts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT6M21S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/deciding-between-self-hosted-and-hosted-fonts"},{"@type":"VideoObject","name":"Understanding how web fonts affect page weight - 1. Comparing and Choosing Web Fonts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT5M58S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/understanding-how-web-fonts-affect-page-weight"}],[{"@type":"VideoObject","name":"Exploring typography scale and vertical rhythm - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT4M8S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/exploring-typography-scale-and-vertical-rhythm"},{"@type":"VideoObject","name":"Implementing a modular scale to create typographic hierarchy - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT6M23S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/implementing-a-modular-scale-to-create-typographic-hierarchy"},{"@type":"VideoObject","name":"Vertical rhythm with a base unit - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT4M38S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/vertical-rhythm-with-a-base-unit"},{"@type":"VideoObject","name":"Sizing your type: Pixels, ems, and rems - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT10M27S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/sizing-your-type-pixels-ems-and-rems"},{"@type":"VideoObject","name":"Applying viewport units (vh and vw) to typography - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT6M30S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/applying-viewport-units-vh-and-vw-to-typography"},{"@type":"VideoObject","name":"Applying and choosing our typographic scale - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT8M1S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/applying-and-choosing-our-typographic-scale"},{"@type":"VideoObject","name":"Challenge: Select and apply a different scale - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT46S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/challenge-select-and-apply-a-different-scale"},{"@type":"VideoObject","name":"Solution: Select and apply a different scale - 2. Establishing Rhythm in Your Typographic System","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT1M33S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/solution-select-and-apply-a-different-scale"}],[{"@type":"VideoObject","name":"Setting up and populating prototype pages - 3. Creating Type Prototype Pages","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT7M39S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/setting-up-and-populating-prototype-pages"},{"@type":"VideoObject","name":"Testing type across browsers and devices - 3. Creating Type Prototype Pages","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT3M19S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/testing-type-across-browsers-and-devices"},{"@type":"VideoObject","name":"Establishing the font stack - 3. Creating Type Prototype Pages","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT7M32S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/establishing-the-font-stack"},{"@type":"VideoObject","name":"Challenge: Create a font stack - 3. Creating Type Prototype Pages","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT39S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/challenge-create-a-font-stack"},{"@type":"VideoObject","name":"Solution: Create a font stack - 3. Creating Type Prototype Pages","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT1M26S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/solution-create-a-font-stack"}],[{"@type":"VideoObject","name":"Maintaining line lengths for comfortable reading across screen sizes - 4. Setting Type for Readability Across Screen Sizes","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT6M5S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/maintaining-line-lengths-for-comfortable-reading-across-screen-sizes"},{"@type":"VideoObject","name":"Using media queries to set natural typographic breakpoints - 4. Setting Type for Readability Across Screen Sizes","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT9M10S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/using-media-queries-to-set-natural-typographic-breakpoints"},{"@type":"VideoObject","name":"Controlling line breaks for headings - 4. Setting Type for Readability Across Screen Sizes","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT5M15S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/controlling-line-breaks-for-headings"},{"@type":"VideoObject","name":"Managing flashes of unstyled text (FOUT) using web font events - 4. Setting Type for Readability Across Screen Sizes","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT6M25S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/managing-flashes-of-unstyled-text-fout-using-web-font-events"},{"@type":"VideoObject","name":"Challenge: Handling your own web font events - 4. Setting Type for Readability Across Screen Sizes","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT40S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/challenge-handling-your-own-web-font-events"},{"@type":"VideoObject","name":"Solution: Handling your own web font events - 4. Setting Type for Readability Across Screen Sizes","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT2M17S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/solution-handling-your-own-web-font-events"}],[{"@type":"VideoObject","name":"Previewing web type choices with the Typecast app - 5. Helpful Online Tools and Scripts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT2M40S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/previewing-web-type-choices-with-the-typecast-app"},{"@type":"VideoObject","name":"Tools for previewing type and media queries: ish., Edge Inspect, and more - 5. Helpful Online Tools and Scripts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT2M15S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/tools-for-previewing-type-and-media-queries-ish-edge-inspect-and-more"},{"@type":"VideoObject","name":"Tools for controlling type dynamically with JavaScript and jQuery - 5. Helpful Online Tools and Scripts","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT1M11S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/tools-for-controlling-type-dynamically-with-javascript-and-jquery"}],[{"@type":"VideoObject","name":"Next steps: The future of responsive typography - Conclusion","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT2M46S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/next-steps-the-future-of-responsive-typography"}]],"syllabusSections":[{"@type":"Syllabus","name":"Welcome","timeRequired":"PT43S"},{"@type":"Syllabus","name":"What you should know before watching this course","timeRequired":"PT43S"},{"@type":"Syllabus","name":"Using the exercise files","timeRequired":"PT34S"},{"@type":"Syllabus","name":"Using challenges","timeRequired":"PT36S"},{"@type":"Syllabus","name":"Exploring the goals of typography and responsive design","timeRequired":"PT2M28S"},{"@type":"Syllabus","name":"Identifying quality web fonts","timeRequired":"PT6M8S"},{"@type":"Syllabus","name":"Matching fonts to chunks of text content","timeRequired":"PT4M28S"},{"@type":"Syllabus","name":"Deciding between self-hosted and hosted fonts","timeRequired":"PT6M21S"},{"@type":"Syllabus","name":"Understanding how web fonts affect page weight","timeRequired":"PT5M58S"},{"@type":"Syllabus","name":"Exploring typography scale and vertical rhythm","timeRequired":"PT4M8S"},{"@type":"Syllabus","name":"Implementing a modular scale to create typographic hierarchy","timeRequired":"PT6M23S"},{"@type":"Syllabus","name":"Vertical rhythm with a base unit","timeRequired":"PT4M38S"},{"@type":"Syllabus","name":"Sizing your type: Pixels, ems, and rems","timeRequired":"PT10M27S"},{"@type":"Syllabus","name":"Applying viewport units (vh and vw) to typography","timeRequired":"PT6M30S"},{"@type":"Syllabus","name":"Applying and choosing our typographic scale","timeRequired":"PT8M1S"},{"@type":"Syllabus","name":"Challenge: Select and apply a different scale","timeRequired":"PT46S"},{"@type":"Syllabus","name":"Solution: Select and apply a different scale","timeRequired":"PT1M33S"},{"@type":"Syllabus","name":"Setting up and populating prototype pages","timeRequired":"PT7M39S"},{"@type":"Syllabus","name":"Testing type across browsers and devices","timeRequired":"PT3M19S"},{"@type":"Syllabus","name":"Establishing the font stack","timeRequired":"PT7M32S"},{"@type":"Syllabus","name":"Challenge: Create a font stack","timeRequired":"PT39S"},{"@type":"Syllabus","name":"Solution: Create a font stack","timeRequired":"PT1M26S"},{"@type":"Syllabus","name":"Maintaining line lengths for comfortable reading across screen sizes","timeRequired":"PT6M5S"},{"@type":"Syllabus","name":"Using media queries to set natural typographic breakpoints","timeRequired":"PT9M10S"},{"@type":"Syllabus","name":"Controlling line breaks for headings","timeRequired":"PT5M15S"},{"@type":"Syllabus","name":"Managing flashes of unstyled text (FOUT) using web font events","timeRequired":"PT6M25S"},{"@type":"Syllabus","name":"Challenge: Handling your own web font events","timeRequired":"PT40S"},{"@type":"Syllabus","name":"Solution: Handling your own web font events","timeRequired":"PT2M17S"},{"@type":"Syllabus","name":"Previewing web type choices with the Typecast app","timeRequired":"PT2M40S"},{"@type":"Syllabus","name":"Tools for previewing type and media queries: ish., Edge Inspect, and more","timeRequired":"PT2M15S"},{"@type":"Syllabus","name":"Tools for controlling type dynamically with JavaScript and jQuery","timeRequired":"PT1M11S"},{"@type":"Syllabus","name":"Next steps: The future of responsive typography","timeRequired":"PT2M46S"}],"aggregateRating":{"@type":"AggregateRating","ratingCount":13,"ratingValue":4.3,"bestRating":5,"worstRating":1},"review":[],"video":{"@type":"VideoObject","name":"Welcome - Responsive Typography Techniques","author":{"@type":"Person","name":"Val Head","description":"Speaker, Author, Principal Designer","jobTitle":"Speaker, Author, Principal Designer","url":"https://www.linkedin.com/in/valhead","image":"https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes","description":"Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes.","duration":"PT43S","datePublished":"2014-01-31","uploadDate":"2014-01-31","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/responsive-typography-techniques/welcome"},"educationalLevel":"Intermediate","educationalCredentialAwarded":[{"@type":"EducationalOccupationalCredential","name":"LinkedIn Learning Certificate of Completion","url":"https://www.linkedin.com/help/learning/answer/a598944/learning-certificates-of-completion-faqs","credentialCategory":"Certificate","offers":[{"@type":"Offer","category":"Subscription"}]}]} </script>  </head> <body dir="ltr">   <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Skip to main content </a> <header class="header base-detail-page__header px-mobile-container-padding bg-color-background-container global-alert-offset sticky-header"> <nav class="nav pt-1.5 pb-2 flex items-center justify-between relative flex-nowrap babymamabear:py-1.5 nav--minified-mobile " aria-label="Primary"> <a href="https://www.linkedin.com/learning/?trk=learning-course_nav-header-logo" class="nav__logo-link link-no-visited-state z-1 mr-auto min-h-[52px] flex items-center babybear:z-0 hover:no-underline focus:no-underline active:no-underline babymamabear:mr-3" data-tracking-control-name="learning-course_nav-header-logo" data-tracking-will-navigate> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> </a> <section class="search-bar relative flex flex-grow h-[40px] bg-cool-gray-20 min-w-0 max-w-full mx-4 rounded-sm babymamabear:mx-0 babymamabear:mb-1.5 babymamabear:bg-color-transparent babymamabear:w-full babymamabear:flex babymamabear:flex-wrap search-bar--minified-mobile" data-current-search-type="LEARNING"> <button class="search-bar__placeholder papabear:hidden text-input w-full mt-1.5 !pl-[14px] border-1 border-solid border-color-border-faint rounded-[2px] h-[40px] max-h-[40px] flex items-center overflow-hidden cursor-text" data-tracking-control-name="learning-course_search-switcher-opener"> <icon class="text-color-icon w-3 h-3 mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/397vrsk6op88l4981ji1xe1qt"></icon> <div class="search-bar__full-placeholder font-sans text-md text-color-text max-w-[calc(100%-40px)] text-left whitespace-nowrap overflow-hidden text-ellipsis">  Search skills, subjects, or software  </div> <span class="sr-only">Expand search</span> </button> <div class="switcher-tabs__trigger-and-tabs babymamabear:flex"> <button aria-expanded="false" class="switcher-tabs__placeholder flex !h-full !py-0 !pl-2 !pr-1.5 border-r-1 border-solid border-r-color-border-faint babymamabear:hidden tab-md papabear:tab-vertical papabear:justify-start cursor-pointer" data-tracking-control-name="learning-course_switcher-tabs-placeholder" aria-describedby="switcher-description"> <span class="switcher-tabs__placeholder-text m-auto"></span> <icon class="switcher-tabs__caret-down-filled onload pointer-events-none block my-auto min-h-[24px] min-w-[24px] h-[24px] babymamabear:hidden" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7asbl4deqijhoy3z2ivveispv"></icon> </button> <div id="switcher-description" class="hidden">This button displays the currently selected search type. When expanded it provides a list of search options that will switch the search inputs to match the current selection. </div>  <div class="switcher-tabs hidden z-[1] w-auto min-w-[160px] mb-1.5 py-1 absolute top-[48px] left-0 border-solid border-1 border-color-border-faint papabear:container-raised babymamabear:static babymamabear:w-[100vw] babymamabear:h-[48px] babymamabear:p-0 overflow-y-hidden overflow-x-auto md:overflow-x-hidden"> <ul class="switcher-tabs__list flex flex-1 items-stretch papabear:flex-col" role="tablist"> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="jobs-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="JOBS" data-tracking-control-name="learning-course_switcher-tabs-jobs-search-switcher" id="job-switcher-tab" role="tab"> Jobs </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="people-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="PEOPLE" data-tracking-control-name="learning-course_switcher-tabs-people-search-switcher" id="people-switcher-tab" role="tab"> People </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="learning-search-panel" aria-selected="true" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer tab-selected" data-switcher-type="LEARNING" data-tracking-control-name="learning-course_switcher-tabs-learning-search-switcher" id="learning-switcher-tab" role="tab"> Learning </button> </li> </ul> <button aria-label="Close" class="switcher-tabs__cancel-btn papabear:hidden block w-6 h-6 m-auto text-color-text-low-emphasis" data-tracking-control-name="learning-course_switcher-tabs-cancel-search-switcher" type="button"> <icon class="switcher-tabs__cancel-icon block w-3 h-3 m-auto onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </div> </div> <section class="base-search-bar w-full h-full" data-searchbar-type="PEOPLE" aria-labelledby="people-switcher-tab" id="people-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/pub/dir" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="First Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input" maxlength="500" name="firstName" placeholder="First Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Last Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input" maxlength="500" name="lastName" placeholder="Last Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="trk" value="learning-course_people-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="JOBS" aria-labelledby="job-switcher-tab" id="jobs-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/jobs/search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-form"> <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input keywords-typeahead-input text-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-keywords-typeahead-list" aria-haspopup="listbox" aria-label="Search job titles or companies" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-keywords" maxlength="500" name="keywords" placeholder="Search job titles or companies" role="combobox" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-keywords-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section>  <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input location-typeahead-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-location-typeahead-list" aria-haspopup="listbox" aria-label="Location" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-location" maxlength="500" name="location" placeholder="Location" role="combobox" value="Hong Kong" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-location-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="geoId" value="102817007" type="hidden"> <input name="trk" value="learning-course_jobs-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="LEARNING" aria-labelledby="learning-switcher-tab" id="learning-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/learning/search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Search skills, subjects, or software" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input" maxlength="500" name="keywords" placeholder="Search skills, subjects, or software" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input class="nav__search-uoo" name="upsellOrderOrigin" type="hidden"> <input name="trk" value="learning-course_learning-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section>  <div aria-live="polite" class="search-bar__live-text sr-only" role="status"></div> </section>  <div class="nav__cta-container order-3 flex gap-x-1 justify-end min-w-[100px] flex-nowrap flex-shrink-0 babybear:flex-wrap flex-2 babymamabear:min-w-[50px] "> <a class="nav__button-tertiary btn-md btn-tertiary" href="http://www.linkedin.com/learning/subscription/products?courseSlug=responsive-typography-techniques&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fresponsive-typography-techniques&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fresponsive-typography-techniques%3Ftrk%3Dlearning-topics_learning-search-card_search-card" data-tracking-control-name="lil_upsell_nav_subscription" data-tracking-impression-name="lil_upsell_nav_subscription" data-test-live-nav-primary-cta data-tracking-will-navigate> Start free trial </a> <a class="nav__button-secondary btn-md btn-secondary-emphasis" href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fresponsive-typography-techniques%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fresponsive-typography-techniques%3Ftrk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Sign in </a> <a aria-label="Sign in" class="nav__link-person papabear:hidden mamabear:hidden" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fresponsive-typography-techniques%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fresponsive-typography-techniques%3Ftrk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_nav-header-signin"> <img class="inline-block relative rounded-[50%] w-4 h-4 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt> </a> </div>   </nav> </header>  <div class="cta-banner "> <div class="enterprise-nav"> <div class="enterprise-nav__content-wrapper"> <p id="enterprise-nav-solutions" class="enterprise-nav__content" tabindex="-1"> Solutions for: </p> <a href="https://learning.linkedin.com/for-entire-companies?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-business" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-business">Business</a> <a href="https://learning.linkedin.com/for-higher-education?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-education" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-education">Higher Education</a> <a href="https://learning.linkedin.com/for-governments?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-government" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-government">Government</a> <a href="/learning/subscription/teams?veh=lil_upx&src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-buy" class="enterprise-nav__content" data-test-live-enterprise-upsell="true" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" data-tracking-impression-name="lil_upsell_learning-course_enterprise-nav_teambuy" id="business-nav-buy">Buy for my team</a> </div> </div>   </div> <main class="main papabear:flex papabear:w-content-max-w papabear:mx-auto papabear:pt-desktop-content-top-margin mamabear:pt-desktop-content-top-margin " id="main-content" role="main"> <section class="core-rail mx-auto papabear:w-core-rail-width mamabear:max-w-[790px] babybear:max-w-[790px]"> <ol class="breadcrumb__list"> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/browse?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>All topics</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Creative</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Web Design</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/responsive-web-design?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Responsive Web Design</a> </li> </ol> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"All topics","item":"https://www.linkedin.com/learning/browse"},{"@type":"ListItem","position":2,"name":"Creative","item":"https://www.linkedin.com/learning/topics/creative"},{"@type":"ListItem","position":3,"name":"Web Design","item":"https://www.linkedin.com/learning/topics/web-design"},{"@type":"ListItem","position":4,"name":"Responsive Web Design","item":"https://www.linkedin.com/learning/topics/responsive-web-design"}]} </script> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__image-container"> <img class="top-card__image" alt="Responsive Typography Techniques" data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQHvwIJAHWnWRA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567117445882?e=2147483647&v=beta&t=5h7HD_4HtMdHuC2ZlD2zJJqg1VM_HCO7Kju-4Vm6pes"> <a class="top-card__overlay-button" data-tracking-control-name="course_preview" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/welcome?autoplay=true&trk=course_preview"> <span class="top-card__preview-cta "> <icon class="top-card__preview-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l"> </icon> <span class="top-card__preview-cta-text">Preview</span> </span>  </a> </section> <div class="top-card-layout__card relative p-2 papabear:p-details-container-padding"> <div class="top-card-layout__entity-info-container flex flex-wrap papabear:flex-nowrap"> <div class="top-card-layout__entity-info flex-grow flex-shrink-0 basis-0 babybear:flex-none babybear:w-full babybear:flex-none babybear:w-full"> <h1 class="top-card-layout__title font-sans text-lg papabear:text-xl font-bold leading-open text-color-text mb-0"> Responsive Typography Techniques </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> <div class="top-card__headline-row"> <span class="top-card__headline-row-item top-card__headline-row-item--large">With Val Head</span> <span class="top-card__headline-row-item">Liked by 290 users</span> </div> <div class="top-card__headline-row"> <span class="top-card__headline-row-item">Duration: 2h 9m</span> <span class="top-card__headline-row-item">Skill level: Intermediate</span> <span class="top-card__headline-row-item">Released: 1/31/2014</span> </div> </h2>   <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=responsive-typography-techniques&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fresponsive-typography-techniques&trk=course_info&upsellTrk=lil_upsell_course_info_subscription" data-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-impression-name="lil_upsell_course_info_subscription" data-litms-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-will-navigate class="top-card__upsell-link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--primary btn-md btn-primary" data-test-live-course-sub-upsell> Start my 1-month free trial </a> <a class="buy-for-your-team-cta__link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--secondary btn-md btn-secondary" href="/learning/subscription/teams?veh=lil_upx&src=li-lil-upsell&trk=learning-course_buy-for-your-team-cta" data-tracking-control-name="learning-course_buy-for-your-team-cta" data-tracking-impression-name="lil_upsell_learning-course_buy-for-your-team-cta_teambuy" data-test-live-buy-for-your-team-upsell data-tracking-will-navigate> Buy for my team </a> </div> </div>  </div>   </div> </section> <div class="details mx-details-container-padding"> <section class="core-section-container my-3 course-details">  <h2 class="core-section-container__title section-title"> Course details </h2>  <div class="core-section-container__content break-words"> <section class="show-more-less-html course-details__description" data-max-lines="4"> <div class="show-more-less-html__markup show-more-less-html__markup--clamp-after-4 relative overflow-hidden"> Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes. Designer Val Head shows you how to choose quality web fonts, develop a typographic scale and rhythm throughout your design, and build bulletproof font stacks. Plus, learn how to use media queries and CSS rules to keep your type looking great at any size. This course is a collection of best practices and techniques that will soon be an indispensible part of any web typesetter's toolbox. </div> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--more ml-0.5" data-tracking-control-name="learning-course_show-more-html-btn" aria-label="i18n_show_more" aria-expanded="false">  Show more <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--less ml-0.5" data-tracking-control-name="learning-course_show-less-html-btn" aria-label="i18n_show_less" aria-expanded="true">  Show less <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button>  </section> </div> </section> <section class="core-section-container my-3 course-skills">  <h2 class="core-section-container__title section-title"> Skills you’ll gain </h2>  <div class="core-section-container__content break-words"> <ul class="course-skills__skill-list"> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/topics/responsive-web-design?trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> Responsive Web Design </a> </li> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/topics/web-typography?trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> Web Typography </a> </li> </ul> </div> </section> <section class="core-section-container my-3">  <h2 class="core-section-container__title section-title"> Earn a sharable certificate </h2>  <div class="core-section-container__content break-words"> <p class="course-certificate__body-paragraph">Share what you’ve learned, and be a standout professional in your desired industry with a certificate showcasing your knowledge gained from the course.</p> <div class="course-certificate__image-container"> <img class="course-certificate__certificate-image" alt="Sample certificate" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/52nu8qc7cfcn7vrftr7ttceqt"> <div> <h3 class="course-certificate__detail-list-heading"> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text learning-logo__text--show-on-mobile" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> <span>Certificate of Completion</span> </h3> <ul> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Showcase on your LinkedIn profile under “Licenses and Certificate” section</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Download or print out as PDF to share with others</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Share as image online to demonstrate your skill</p> </li> </ul> </div> </div> </div> </section> <section class="core-section-container my-3 course-instructors">  <h2 class="core-section-container__title section-title"> Meet the instructor </h2>  <div class="core-section-container__content break-words"> <ul class="course-instructors__list"> <li class="course-instructors__list-item"> <a href="https://www.linkedin.com/in/valhead?trk=learning-course_instructor" target="_self" data-tracking-control-name="learning-course_instructor" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link">  <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C4D03AQGZvvFitqP54g/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1516314589753?e=2147483647&v=beta&t=JOqFUqtSCJrUDS-M3wBDOD7pZ4cuNYjHGQ-yZq1Ermw" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Click here to view Val Head’s instructor page"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Val Head </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Speaker, Author, Principal Designer </h4>   </div>  </a> </li> </ul> </div> </section> <section class="core-section-container my-3 reviews-feed">  <h2 class="core-section-container__title section-title"> Learner reviews </h2>  <div class="core-section-container__content break-words"> <div class="reviews-feed__ratings-summary"> <section class="ratings-summary"> <div class="ratings-summary__overall-rating"> <h3 class="ratings-summary__header"><span class="ratings-summary__rating-average">4.3</span> <span class="ratings-summary__rating-max">out of 5</span></h3> <figure class="ratings-summary__figure"> <span class="star-rating" role="img" aria-label="Rating: 4.3 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7dacecy4xq1otzk8pae2g0hxd"></icon> </span> </span> <figcaption class="ratings-summary__ratings-total">13 ratings</figcaption> </figure> </div> <div class="ratings-summary__breakdown"> <div class="ratings-summary__disclaimer"> <div class="tooltip"> <button class="tooltip__trigger ratings-summary__disclaimer-trigger" data-tracking-control-name="toggle_disclaimer" type="button"> <icon class="ratings-summary__disclaimer-icon" data-svg-class-name="ratings-summary__disclaimer-icon-svg" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/g8uts9v3k83n9e3iyvcxit0k"> </icon> <span class="ratings-summary__disclaimer-text">How are ratings calculated?</span> </button> <span role="tooltip" class="tooltip__popup" aria-hidden="true"> The overall rating is calculated using the average of submitted ratings. Ratings and reviews can only be submitted when non-anonymous learners complete at least 40% of the course. This helps us avoid fake reviews and spam. </span> </div> </div> <ul> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 5 star </figcaption> <progress class="ratings-summary__progress-bar" max="13" value="10" aria-valuemin="0" aria-valuenow="10" aria-valuemax="13"> Current value: 10 </progress> <span class="ratings-summary__rating-count-percent"> 77% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 4 star </figcaption> <progress class="ratings-summary__progress-bar" max="13" value="1" aria-valuemin="0" aria-valuenow="1" aria-valuemax="13"> Current value: 1 </progress> <span class="ratings-summary__rating-count-percent"> 8% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 3 star </figcaption> <progress class="ratings-summary__progress-bar" max="13" value="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="13"> Current value: 0 </progress> <span class="ratings-summary__rating-count-percent"> 0% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 2 star </figcaption> <progress class="ratings-summary__progress-bar" max="13" value="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="13"> Current value: 0 </progress> <span class="ratings-summary__rating-count-percent"> 0% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 1 star </figcaption> <progress class="ratings-summary__progress-bar" max="13" value="2" aria-valuemin="0" aria-valuenow="2" aria-valuemax="13"> Current value: 2 </progress> <span class="ratings-summary__rating-count-percent"> 15% </span> </figure> </li> </ul> </div> </section> </div>  </div> </section> </div> </section> <section class="right-rail papabear:w-right-rail-width papabear:ml-column-gutter mamabear:max-w-[790px] mamabear:px-mobile-container-padding babybear:max-w-[790px] babybear:px-mobile-container-padding"> <section class="table-of-contents mb-4 table-of-contents--with-max-height"> <h2 class="table-of-contents__header"> Contents </h2> <ul class="table-of-contents__list"> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/welcome?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Welcome </div> <div class="table-of-contents__item-duration"> 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/what-you-should-know-before-watching-this-course?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> What you should know before watching this course </div> <div class="table-of-contents__item-duration"> 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/using-the-exercise-files?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using the exercise files </div> <div class="table-of-contents__item-duration"> 34s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/using-challenges?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using challenges </div> <div class="table-of-contents__item-duration"> 36s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Comparing and Choosing Web Fonts <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Comparing and Choosing Web Fonts <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/exploring-the-goals-of-typography-and-responsive-design?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Exploring the goals of typography and responsive design </div> <div class="table-of-contents__item-duration"> 2m 28s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/identifying-quality-web-fonts?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Identifying quality web fonts </div> <div class="table-of-contents__item-duration"> 6m 8s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/matching-fonts-to-chunks-of-text-content?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Matching fonts to chunks of text content </div> <div class="table-of-contents__item-duration"> 4m 28s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/deciding-between-self-hosted-and-hosted-fonts?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Deciding between self-hosted and hosted fonts </div> <div class="table-of-contents__item-duration"> 6m 21s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/understanding-how-web-fonts-affect-page-weight?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Understanding how web fonts affect page weight </div> <div class="table-of-contents__item-duration"> 5m 58s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Establishing Rhythm in Your Typographic System <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Establishing Rhythm in Your Typographic System <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/exploring-typography-scale-and-vertical-rhythm?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Exploring typography scale and vertical rhythm </div> <div class="table-of-contents__item-duration"> 4m 8s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/implementing-a-modular-scale-to-create-typographic-hierarchy?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Implementing a modular scale to create typographic hierarchy </div> <div class="table-of-contents__item-duration"> 6m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/vertical-rhythm-with-a-base-unit?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Vertical rhythm with a base unit </div> <div class="table-of-contents__item-duration"> 4m 38s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/sizing-your-type-pixels-ems-and-rems?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Sizing your type: Pixels, ems, and rems </div> <div class="table-of-contents__item-duration"> 10m 27s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/applying-viewport-units-vh-and-vw-to-typography?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Applying viewport units (vh and vw) to typography </div> <div class="table-of-contents__item-duration"> 6m 30s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/applying-and-choosing-our-typographic-scale?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Applying and choosing our typographic scale </div> <div class="table-of-contents__item-duration"> 8m 1s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/challenge-select-and-apply-a-different-scale?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Select and apply a different scale </div> <div class="table-of-contents__item-duration"> 46s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/solution-select-and-apply-a-different-scale?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Select and apply a different scale </div> <div class="table-of-contents__item-duration"> 1m 33s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Creating Type Prototype Pages <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Creating Type Prototype Pages <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/setting-up-and-populating-prototype-pages?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Setting up and populating prototype pages </div> <div class="table-of-contents__item-duration"> 7m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/testing-type-across-browsers-and-devices?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Testing type across browsers and devices </div> <div class="table-of-contents__item-duration"> 3m 19s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/establishing-the-font-stack?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Establishing the font stack </div> <div class="table-of-contents__item-duration"> 7m 32s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/challenge-create-a-font-stack?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Create a font stack </div> <div class="table-of-contents__item-duration"> 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/solution-create-a-font-stack?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Create a font stack </div> <div class="table-of-contents__item-duration"> 1m 26s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Setting Type for Readability Across Screen Sizes <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Setting Type for Readability Across Screen Sizes <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/maintaining-line-lengths-for-comfortable-reading-across-screen-sizes?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Maintaining line lengths for comfortable reading across screen sizes </div> <div class="table-of-contents__item-duration"> 6m 5s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/using-media-queries-to-set-natural-typographic-breakpoints?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using media queries to set natural typographic breakpoints </div> <div class="table-of-contents__item-duration"> 9m 10s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/controlling-line-breaks-for-headings?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Controlling line breaks for headings </div> <div class="table-of-contents__item-duration"> 5m 15s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/managing-flashes-of-unstyled-text-fout-using-web-font-events?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Managing flashes of unstyled text (FOUT) using web font events </div> <div class="table-of-contents__item-duration"> 6m 25s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/challenge-handling-your-own-web-font-events?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Handling your own web font events </div> <div class="table-of-contents__item-duration"> 40s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/solution-handling-your-own-web-font-events?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Handling your own web font events </div> <div class="table-of-contents__item-duration"> 2m 17s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Helpful Online Tools and Scripts <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Helpful Online Tools and Scripts <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/previewing-web-type-choices-with-the-typecast-app?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Previewing web type choices with the Typecast app </div> <div class="table-of-contents__item-duration"> 2m 40s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/tools-for-previewing-type-and-media-queries-ish-edge-inspect-and-more?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Tools for previewing type and media queries: ish., Edge Inspect, and more </div> <div class="table-of-contents__item-duration"> 2m 15s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/tools-for-controlling-type-dynamically-with-javascript-and-jquery?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Tools for controlling type dynamically with JavaScript and jQuery </div> <div class="table-of-contents__item-duration"> 1m 11s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/responsive-typography-techniques/next-steps-the-future-of-responsive-typography?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Next steps: The future of responsive typography </div> <div class="table-of-contents__item-duration"> 2m 46s </div> </div> </a> </li> </ul>  </div> </li> </ul> </section> <section class="aside-section-container mb-4 subscription-value-props-aside-section"> <h2 class="aside-section-container__title section-title"> What’s included </h2>  <div class="aside-section-container__content break-words"> <ul> <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Practice while you learn</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">1 exercise file</span> </li>  <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Learn on the go</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">Access on tablet and phone</span> </li>  </ul> </div> </section>  <section class="aside-section-container mb-4"> <h2 class="aside-section-container__title section-title"> Download courses </h2>  <div class="aside-section-container__content break-words"> <p>Use your iOS or Android LinkedIn Learning app, and watch courses on your mobile device without an internet connection.</p> <div class="app-links-aside-section__link-container"> <a class="app-links-aside-section__link" href="https://itunes.apple.com/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_app_links&trk=learning-course_apple-app-store" data-tracking-control-name="learning-course_apple-app-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Download on the App Store" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry" height="42px" width="142px"> </a> <a class="app-links-aside-section__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source%3Dlinkedinlearning%26utm_medium%3DmobileWeb%26utm_campaign%3Dlearning_guest&ct=learning_course_app_links&trk=learning-course_google-play-store" data-tracking-control-name="learning-course_google-play-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Get it on Google Play" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb" height="42px" width="142px"> </a> </div> </div> </section> </section> </main> <div class="pre-footer "> <section class="core-section-container my-3 price-disclaimer">    <div class="core-section-container__content break-words"> <p class="price-disclaimer__copy"> <sup class="price-disclaimer__copy--sup">*</sup>Price may change based on profile and billing country information entered during Sign In or Registration </p> </div> </section> <section class="tw-linkster bg-cool-gray-20 browse-map" data-impression-id="learning-course_linkster" data-js-module-id="linkster"> <div class="max-w-screen-content-max-w w-full flex justify-between my-0 mx-auto mamabear:px-3 babybear:px-2 babybear:flex-col"> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Business Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-analysis-and-strategy?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Analysis and Strategy </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-software-and-tools?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Software and Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/career-development-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Career Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/customer-service-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Customer Service </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/diversity-equity-and-inclusion-dei?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Diversity, Equity, and Inclusion (DEI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/finance-and-accounting?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finance and Accounting </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/human-resources-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Human Resources </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/leadership-and-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Leadership and Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/marketing-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/professional-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Professional Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/project-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Project Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/sales-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Sales </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/small-business-and-entrepreneurship?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Small Business and Entrepreneurship </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/training-and-education?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Training and Education </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all business courses" href="https://www.linkedin.com/learning/topics/business?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Creative Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/aec?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> AEC </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/animation-and-illustration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Animation and Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/audio-and-music?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Audio and Music </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/graphic-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Graphic Design </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/motion-graphics-and-vfx?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Motion Graphics and VFX </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/photography-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Photography </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/product-and-manufacturing?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Product and Manufacturing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/user-experience?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> User Experience </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/2015-54?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Video </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/visualization-and-real-time?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualization and Real-Time </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Design </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all creative courses" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Technology Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/artificial-intelligence?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Artificial Intelligence (AI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/cloud-computing-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cloud Computing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/security-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/data-science?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Data Science </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/database-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Database Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/devops?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> DevOps </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/hardware?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Hardware </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/it-help-desk-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT Help Desk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/mobile-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Mobile Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/network-and-system-administration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Network and System Administration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Software Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Development </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all technology courses" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> </div> </section> </div> <footer class="li-footer bg-transparent w-full "> <ul class="li-footer__list flex flex-wrap flex-row items-start justify-start w-full h-auto min-h-[50px] my-[0px] mx-auto py-3 px-2 papabear:w-[1128px] papabear:p-0"> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <span class="sr-only">LinkedIn</span> <icon class="li-footer__copy-logo text-color-logo-brand-alt inline-block self-center h-[14px] w-[56px] mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e12h2cd8ac580qen9qdd0qks8"></icon> <span class="li-footer__copy-text flex items-center">© 2024</span> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://about.linkedin.com?trk=d_learning_course_guest_footer-about" data-tracking-control-name="d_learning_course_guest_footer-about" data-tracking-will-navigate> About </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/accessibility?trk=d_learning_course_guest_footer-accessibility" data-tracking-control-name="d_learning_course_guest_footer-accessibility" data-tracking-will-navigate> Accessibility </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/user-agreement?trk=d_learning_course_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_guest_footer-user-agreement" data-tracking-will-navigate> User Agreement </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/privacy-policy?trk=d_learning_course_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_guest_footer-privacy-policy" data-tracking-will-navigate> Privacy Policy </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/cookie-policy?trk=d_learning_course_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/copyright-policy?trk=d_learning_course_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://brand.linkedin.com/policies?trk=d_learning_course_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_guest_footer-brand-policy" data-tracking-will-navigate> Brand Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/psettings/guest-controls?trk=d_learning_course_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_guest_footer-guest-controls" data-tracking-will-navigate> Guest Controls </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/professional-community-policies?trk=d_learning_course_guest_footer-community-guide" data-tracking-control-name="d_learning_course_guest_footer-community-guide" data-tracking-will-navigate> Community Guidelines </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <div class="collapsible-dropdown collapsible-dropdown--footer collapsible-dropdown--up flex items-center relative hyphens-auto language-selector z-2">  <ul class="collapsible-dropdown__list hidden container-raised absolute w-auto overflow-y-auto flex-col items-stretch z-1 bottom-[100%] top-auto" role="menu" tabindex="-1"> <li class="language-selector__item" role="presentation">  <button aria-label="العربية (Arabic)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ar_AE" data-locale="ar_AE" role="menuitem" lang="ar_AE"> العربية (Arabic) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="বাংলা (Bangla)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-bn_IN" data-locale="bn_IN" role="menuitem" lang="bn_IN"> বাংলা (Bangla) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Čeština (Czech)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-cs_CZ" data-locale="cs_CZ" role="menuitem" lang="cs_CZ"> Čeština (Czech) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Dansk (Danish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-da_DK" data-locale="da_DK" role="menuitem" lang="da_DK"> Dansk (Danish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Deutsch (German)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> Deutsch (German) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Ελληνικά (Greek)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-el_GR" data-locale="el_GR" role="menuitem" lang="el_GR"> Ελληνικά (Greek) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="English (English) selected" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link--selected" data-tracking-control-name="language-selector-en_US" data-locale="en_US" role="menuitem" lang="en_US"> <strong>English (English)</strong> </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Español (Spanish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-es_ES" data-locale="es_ES" role="menuitem" lang="es_ES"> Español (Spanish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="فارسی (Persian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fa_IR" data-locale="fa_IR" role="menuitem" lang="fa_IR"> فارسی (Persian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Suomi (Finnish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fi_FI" data-locale="fi_FI" role="menuitem" lang="fi_FI"> Suomi (Finnish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Français (French)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fr_FR" data-locale="fr_FR" role="menuitem" lang="fr_FR"> Français (French) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="हिंदी (Hindi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hi_IN" data-locale="hi_IN" role="menuitem" lang="hi_IN"> हिंदी (Hindi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Magyar (Hungarian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hu_HU" data-locale="hu_HU" role="menuitem" lang="hu_HU"> Magyar (Hungarian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Indonesia (Indonesian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-in_ID" data-locale="in_ID" role="menuitem" lang="in_ID"> Bahasa Indonesia (Indonesian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Italiano (Italian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-it_IT" data-locale="it_IT" role="menuitem" lang="it_IT"> Italiano (Italian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="עברית (Hebrew)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-iw_IL" data-locale="iw_IL" role="menuitem" lang="iw_IL"> עברית (Hebrew) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="日本語 (Japanese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ja_JP" data-locale="ja_JP" role="menuitem" lang="ja_JP"> 日本語 (Japanese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="한국어 (Korean)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ko_KR" data-locale="ko_KR" role="menuitem" lang="ko_KR"> 한국어 (Korean) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="मराठी (Marathi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-mr_IN" data-locale="mr_IN" role="menuitem" lang="mr_IN"> मराठी (Marathi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Malaysia (Malay)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ms_MY" data-locale="ms_MY" role="menuitem" lang="ms_MY"> Bahasa Malaysia (Malay) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Nederlands (Dutch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-nl_NL" data-locale="nl_NL" role="menuitem" lang="nl_NL"> Nederlands (Dutch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Norsk (Norwegian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-no_NO" data-locale="no_NO" role="menuitem" lang="no_NO"> Norsk (Norwegian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ਪੰਜਾਬੀ (Punjabi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pa_IN" data-locale="pa_IN" role="menuitem" lang="pa_IN"> ਪੰਜਾਬੀ (Punjabi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Polski (Polish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pl_PL" data-locale="pl_PL" role="menuitem" lang="pl_PL"> Polski (Polish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Português (Portuguese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pt_BR" data-locale="pt_BR" role="menuitem" lang="pt_BR"> Português (Portuguese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Română (Romanian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ro_RO" data-locale="ro_RO" role="menuitem" lang="ro_RO"> Română (Romanian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Русский (Russian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ru_RU" data-locale="ru_RU" role="menuitem" lang="ru_RU"> Русский (Russian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Svenska (Swedish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-sv_SE" data-locale="sv_SE" role="menuitem" lang="sv_SE"> Svenska (Swedish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="తెలుగు (Telugu)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-te_IN" data-locale="te_IN" role="menuitem" lang="te_IN"> తెలుగు (Telugu) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ภาษาไทย (Thai)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-th_TH" data-locale="th_TH" role="menuitem" lang="th_TH"> ภาษาไทย (Thai) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tagalog (Tagalog)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tl_PH" data-locale="tl_PH" role="menuitem" lang="tl_PH"> Tagalog (Tagalog) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Türkçe (Turkish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tr_TR" data-locale="tr_TR" role="menuitem" lang="tr_TR"> Türkçe (Turkish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Українська (Ukrainian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-uk_UA" data-locale="uk_UA" role="menuitem" lang="uk_UA"> Українська (Ukrainian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tiếng Việt (Vietnamese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-vi_VN" data-locale="vi_VN" role="menuitem" lang="vi_VN"> Tiếng Việt (Vietnamese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="简体中文 (Chinese (Simplified))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_CN" data-locale="zh_CN" role="menuitem" lang="zh_CN"> 简体中文 (Chinese (Simplified)) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="正體中文 (Chinese (Traditional))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_TW" data-locale="zh_TW" role="menuitem" lang="zh_TW"> 正體中文 (Chinese (Traditional)) </button> </li>  </ul> <button class="language-selector__button select-none relative pr-2 font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover hover:cursor-pointer focus:text-color-link-focus focus:outline-dotted focus:outline-1" aria-expanded="false" data-tracking-control-name="footer-lang-dropdown_trigger"> <span class="language-selector__label-text mr-0.5 break-words"> Language </span> <icon class="language-selector__label-chevron w-2 h-2 absolute top-0 right-0" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> </div> </li> </ul>  </footer> <script src="https://static.licdn.com/aero-v1/sc/h/eh08muqvrde4h3hc6koyij5ti" async></script>  <script src="https://static.licdn.com/aero-v1/sc/h/awgwgu3fg49q0tcvd24ku87qq" async defer></script> <script data-delayed-url="https://static.licdn.com/aero-v1/sc/h/81wy0f4hfrhoilx9eqdwg202z" data-module-id="media-player"></script> <code id="trackingData" style="display: none"></code> <code id="alcOnlyData" style="display: none"></code> </body> </html>

CINXE.COM

Responsive Typography Techniques Online Class | LinkedIn Learning, formerly Lynda.com