René's URL Explorer Experiment


Title: Text and typography  |  web.dev

Open Graph Title: Text and typography  |  web.dev

Description: In this module, learn how to style text on the web.

Open Graph Description: In this module, learn how to style text on the web.

Opengraph URL: https://web.dev/learn/css/typography

X: @ChromiumDev

direct link

Domain: web.dev

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:imagehttps://web.dev/static/images/social-wide.jpg
og:image:width1200
og:image:height675
og:localeen
twitter:cardsummary
twitter:imagehttps://web.dev/static/images/social-wide.jpg

Links:

Skip to main content https://web.dev/learn/css/typography#main-content
https://web.dev/
Resources https://web.dev/learn
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
https://web.dev/
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Welcome to Learn CSS!https://web.dev/learn/css/welcome
Box Modelhttps://web.dev/learn/css/box-model
Selectorshttps://web.dev/learn/css/selectors
Nestinghttps://web.dev/learn/css/nesting
The cascadehttps://web.dev/learn/css/the-cascade
Specificityhttps://web.dev/learn/css/specificity
Inheritancehttps://web.dev/learn/css/inheritance
Colorhttps://web.dev/learn/css/color
Sizing Unitshttps://web.dev/learn/css/sizing
Layouthttps://web.dev/learn/css/layout
Flexboxhttps://web.dev/learn/css/flexbox
Gridhttps://web.dev/learn/css/grid
Logical Propertieshttps://web.dev/learn/css/logical-properties
Custom Propertieshttps://web.dev/learn/css/custom-properties
Spacinghttps://web.dev/learn/css/spacing
Pseudo-elementshttps://web.dev/learn/css/pseudo-elements
Pseudo-classeshttps://web.dev/learn/css/pseudo-classes
Bordershttps://web.dev/learn/css/borders
Shadowshttps://web.dev/learn/css/shadows
Focushttps://web.dev/learn/css/focus
Cursors and pointershttps://web.dev/learn/css/cursors-and-pointers
Z-index and stacking contextshttps://web.dev/learn/css/z-index
Anchor positioninghttps://web.dev/learn/css/anchor-positioning
Popover and dialoghttps://web.dev/learn/css/popover-and-dialog
Functionshttps://web.dev/learn/css/functions
Paths, shapes, clipping, and maskinghttps://web.dev/learn/css/paths-shapes-clipping-masking
Gradientshttps://web.dev/learn/css/gradients
Animationshttps://web.dev/learn/css/animations
Filtershttps://web.dev/learn/css/filters
Blend Modeshttps://web.dev/learn/css/blend-modes
Listshttps://web.dev/learn/css/lists
Countershttps://web.dev/learn/css/counters
Transitionshttps://web.dev/learn/css/transitions
View Transitions for SPAshttps://web.dev/learn/css/view-transitions-spas
Overflowhttps://web.dev/learn/css/overflow
Backgroundshttps://web.dev/learn/css/backgrounds
Text and typographyhttps://web.dev/learn/css/typography
Container querieshttps://web.dev/learn/css/container-queries
Conclusion and next stepshttps://web.dev/learn/css/conclusion
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Read the announcementhttps://goo.gle/mwg-stable
web.dev https://web.dev/
Resources https://web.dev/learn
CSS https://web.dev/learn/css
The CSS Podcast - 036: Text & Typography https://thecsspodcast.libsyn.com/tcp036-v2
ascent-overridehttps://developer.mozilla.org/docs/Web/CSS/@font-face/ascent-override
descent-overridehttps://developer.mozilla.org/docs/Web/CSS/@font-face/descent-override
font-displayhttps://developer.mozilla.org/docs/Web/CSS/@font-face/font-display
font-familyhttps://developer.mozilla.org/docs/Web/CSS/font-family
font-stretchhttps://developer.mozilla.org/docs/Web/CSS/font-stretch
font-stylehttps://developer.mozilla.org/docs/Web/CSS/font-style
font-weighthttps://developer.mozilla.org/docs/Web/CSS/font-weight
font-feature-settingshttps://developer.mozilla.org/docs/Web/CSS/font-feature-settings
font-variation-settingshttps://developer.mozilla.org/docs/Web/CSS/font-variation-settings
line-gap-overridehttps://developer.mozilla.org/docs/Web/CSS/@font-face/line-gap-override
size-adjusthttps://developer.mozilla.org/docs/Web/CSS/@font-face/size-adjust
srchttps://developer.mozilla.org/docs/Web/CSS/@font-face/src
unicode-rangehttps://developer.mozilla.org/docs/Web/CSS/@font-face/unicode-range
more details on older browsershttps://developer.mozilla.org/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers
srchttps://developer.mozilla.org/docs/Web/CSS/@font-face/src
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-family
font-familyhttps://developer.mozilla.org/docs/Web/CSS/font-family
full list of options on MDNhttps://developer.mozilla.org/docs/Web/CSS/font-family#values
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-style
font-stylehttps://developer.mozilla.org/docs/Web/CSS/font-style
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-weight
font-weighthttps://developer.mozilla.org/docs/Web/CSS/font-weight
Meaning of Relative Weightshttps://developer.mozilla.org/docs/Web/CSS/font-weight#meaning_of_relative_weights
"web-safe" oneshttps://web.dev/learn/css/typography#change_the_typeface
Variable Fonthttps://web.dev/learn/css/typography#variable_fonts
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-size
font-sizehttps://developer.mozilla.org/docs/Web/CSS/font-size
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/line-height
line-heighthttps://developer.mozilla.org/docs/Web/CSS/line-height
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/letter-spacing
letter-spacinghttps://developer.mozilla.org/docs/Web/CSS/letter-spacing
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/word-spacing
word-spacinghttps://developer.mozilla.org/docs/Web/CSS/word-spacing
fonthttps://developer.mozilla.org/docs/Web/CSS/font
font-familyhttps://web.dev/learn/css/typography#change_the_typeface
font-sizehttps://web.dev/learn/css/typography#change_the_size_of_text
font-stretchhttps://developer.mozilla.org/docs/Web/CSS/font-stretch
font-stylehttps://web.dev/learn/css/typography#use_italic_and_oblique_fonts
font-varianthttps://web.dev/learn/css/typography#font-variant
font-weighthttps://web.dev/learn/css/typography#make_text_bold
line-heighthttps://web.dev/learn/css/typography#change_the_space_between_lines
MDN's font articlehttps://developer.mozilla.org/docs/Web/CSS/font#syntax
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-transform
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration
text-decorationhttps://developer.mozilla.org/docs/Web/CSS/text-decoration
text-decoration-linehttps://developer.mozilla.org/docs/Web/CSS/text-decoration-line
text-decoration-colorhttps://developer.mozilla.org/docs/Web/CSS/text-decoration-color
text-decoration-stylehttps://developer.mozilla.org/docs/Web/CSS/text-decoration-style
text-decoration-thicknesshttps://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness
text-underline-positionhttps://developer.mozilla.org/docs/Web/CSS/text-underline-position
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-indent
text-indenthttps://developer.mozilla.org/docs/Web/CSS/text-indent
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-overflow
text-overflowhttps://developer.mozilla.org/docs/Web/CSS/text-overflow
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/white-space
white-spacehttps://developer.mozilla.org/docs/Web/CSS/white-space
white-space article on MDNhttps://developer.mozilla.org/docs/Web/CSS/white-space
ASCII arthttps://en.wikipedia.org/wiki/ASCII_art
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/word-break
word-breakhttps://developer.mozilla.org/docs/Web/CSS/word-break
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-align
text-alignhttps://developer.mozilla.org/docs/Web/CSS/text-align
logical propertieshttps://web.dev/learn/css/logical-properties
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-wrap
text-wraphttps://developer.mozilla.org/docs/Web/CSS/text-wrap
contenteditablehttps://developer.mozilla.org/docs/Web/HTML/Reference/Global_attributes/contenteditable
overflow-wraphttps://developer.mozilla.org/docs/Web/CSS/overflow-wrap
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-wrap
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/direction
directionhttps://developer.mozilla.org/docs/Web/CSS/direction
HTML attribute dirhttps://developer.mozilla.org/docs/Web/HTML/Global_attributes/dir
this StackOverflow discussionhttps://stackoverflow.com/a/5375907
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/writing-mode
writing-modehttps://developer.mozilla.org/docs/Web/CSS/writing-mode
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-orientation
text-orientationhttps://developer.mozilla.org/docs/Web/CSS/text-orientation
writing-modehttps://web.dev/learn/css/typography#change_the_flow_of_text
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-shadow
text-shadowhttps://developer.mozilla.org/docs/Web/CSS/text-shadow
the text-shadow section of our module on Shadowshttps://web.dev/learn/css/shadows#text_shadow
our article on Variable Fontshttps://web.dev/articles/variable-fonts
our module on pseudo-elementshttps://web.dev/learn/css/pseudo-elements
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/::first-letter
::first-letterhttps://developer.mozilla.org/docs/Web/CSS/::first-letter
::first-linehttps://developer.mozilla.org/docs/Web/CSS/::first-line
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/::selection
::selectionhttps://developer.mozilla.org/docs/Web/CSS/::selection
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant
font-varianthttps://developer.mozilla.org/docs/Web/CSS/font-variant
font-variant-alternateshttps://developer.mozilla.org/docs/Web/CSS/font-variant-alternates
font-variant-capshttps://developer.mozilla.org/docs/Web/CSS/font-variant-caps
font-variant-east-asianhttps://developer.mozilla.org/docs/Web/CSS/font-variant-east-asian
font-variant-ligatureshttps://developer.mozilla.org/docs/Web/CSS/font-variant-ligatures
font-variant-numerichttps://developer.mozilla.org/docs/Web/CSS/font-variant-numeric
text-orientationhttps://web.dev/learn/css/typography#change_the_orientation_of_text
text-orientationhttps://web.dev/learn/css/typography#change_the_orientation_of_text
more!https://web.dev/learn/css/typography#change_text_alignment
Leadinghttps://en.wikipedia.org/wiki/Leading
Font best practiceshttps://web.dev/articles/font-best-practices
MDN Fundamental text and font stylinghttps://developer.mozilla.org/docs/Learn/CSS/Styling_text/Fundamentals
Previous arrow_back Backgrounds https://web.dev/learn/css/backgrounds
Next Container queries arrow_forward https://web.dev/learn/css/container-queries
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/learn/css/typography

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.