CSS font-size-adjust Property
Description
The font-size-adjust
property adjusts the font-size of the fallback fonts defined with font-family, so that the x-height is the same no matter what font is used. This preserves the readability of the text when fallback happens.
- Initial value
- none
- Applies to
- All elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- As specified
- Animatable
- Yes
- CSS Version
- CSS2, CSS3
- JavaScript syntax
- object.style.fontSizeAdjust
Syntax
font-size-adjust: none | <number>
Values
- noneChoose the size of the font based only on the font-size property.
- <number>Choose the size of the font so that its lowercase letters (as determined by the x-height metric of the font) are the specified number times the font-size.
Example
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, serif;
font-size-adjust: 0.58;
font-size: 10px;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
X | 79 | 43 | 40 | 30 | X |
Tablets / Mobile | |||||
![]() |
|||||
X | 43 | 4 | 30 | X | X |
Last updated by CSSPortal on: 1st November 2019
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL
Sidebar
CSS & HTML References
- CSS At-Rules
- CSS Data Types
- CSS Functions
- attr
- blur
- brightness
- calc
- circle
- contrast
- drop-shadow
- ellipse
- grayscale
- hsl
- hsla
- hue-rotate
- inset
- invert
- linear-gradient
- matrix
- matrix3d
- opacity
- perspective
- polygon
- radial-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- saturate
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- sepia
- skew
- skewX
- skewY
- translate
- translate3d
- translateX
- translateY
- translateZ
- CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-path
- color
- column-count
- column-fill
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- CSS Pseudo Elements
- HTML Tags
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- comment
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr
Convert your website into an app for Android and iOS. Updates automatically. Unicode Characters & Emojis
Search all Unicode characters and emojis plus other tools. Learn Wordpress
Wordpress hosting. Theme and plugin reviews. Wordpress development tips. Templatic
Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips. A2 Web Hosting
Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting. Online Password Manager
Access your passwords from any computer, no need to remember all of your passwords. Advertise Here
Advertise your company and products here!