Pure CSS to make font-size responsive based on dynamic amount of characters

Note: This solution changes based on viewport size and not the amount of content

I just found out that this is possible using VW units. They’re the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ and https://medium.com/design-ux/66bddb327bb1

Related Posts:

  1. Making a
  2. CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
  3. How to get these two divs side-by-side?
  4. What is the difference between the selectors “.class.class” and “.class .class”?
  5. How do I horizontally center a span element inside a div
  6. Is background-color:none valid CSS?
  7. Text not wrapping inside a div element
  8. How to make padding:auto work in CSS?
  9. How to vertically center
  10. How can I horizontally align my divs?
  11. background-size: cover not working?
  12. CSS not working in Chrome
  13. CSS Classes & SubClasses
  14. CSS force image resize and keep aspect ratio
  15. In a bootstrap responsive page how to center a div
  16. Child themes CSS priority problems without using !important
  17. How to work with custom styles saved in theme option?
  18. Modernizr and WordPress – How can I add a CSS class to the html element?
  19. front-page.php stylesheet
  20. How to Add Admin Bar and Admin Menu or Submenu Notification Bubbles?
  21. How to Edit the Order of Global Colors in Elementor? [closed]
  22. WordPress Displaying Thumbnails Vertically
  23. Why do WordPress default themes specify fonts in so many places?
  24. CSS in child theme not getting loaded
  25. CSS ?ver=4.6.1 not updating
  26. Changing Font-Size based on specific Font thru javascript
  27. How to get child style.css to load last rather than second behind parent style.css?
  28. Do I have to use a WordPress specific CSS reset, or is a normal, Eric Meyer style CSS reset fine?
  29. Relative file paths in CSS when linking directly (not enqueuing)
  30. Remove Genericons Helper CSS from twentyfourteen theme
  31. How to make Custom Walker for wp_nav_menu() for materialize framework
  32. Use stylesheet from a different location
  33. Is there a filter for editor-style.css file?
  34. Custom CSS class or ID on menu items that have a Submenu
  35. Different ways to load child theme css
  36. Importing changes to Child Theme
  37. Can you edit WP gutenberg block css without a plugin?
  38. Style internal links based on the tags of the linked post
  39. How to override Bootstrap css with my child theme css in wordpress?
  40. How to stop Gutenberg from outputting inline CSS for specific blocks?
  41. “Scattered” gallery
  42. WordPress adding inline style can’t remove it
  43. How to enable table overflow scroll? (especially order list table)
  44. Change background color of subpages
  45. How to edit the default icon of Add Media button?
  46. How to fix this error? [closed]
  47. Faster fonts on mobile
  48. Reduce white space in twenty fourteen
  49. How to make WordPress using local CSS/Fonts/Scripts only
  50. How to know which order WordPress places CSS files?
  51. Placing background image over section divider
  52. How to remove the gap on right side of webpage (using Bootstrap with WordPress)?
  53. WordPress CSS problems with controls
  54. Remove CSS & JS from
  55. Show class from css in format dropdown
  56. All of my custom Bootstrap styles are not working in my child theme!
  57. Aligning line made with CSS [closed]
  58. Earlier stylesheet not overriding later one
  59. With over a page of content the footer remains where the bottom of the screen was at top scroll
  60. Overwriting forced wordpress CSS styles [closed]
  61. How to add/insert a class to a sidebar in single.php?
  62. Customizing WP-syntax to get custom colors
  63. Sidebar missing from Homepage
  64. W3TotalCache and Javascript — what should go where, when?
  65. CSS not being applied
  66. Help with a little CSS logo/header modification?
  67. 2 css files? Theme css file gets override by another css file that I can not edit
  68. WordPress sidebar content moving to bottom of page
  69. custom template display 3 columns
  70. Need to make sidebar responsive only when screen width is greater than 1024px
  71. Does anyone know how to make text fade in when scrolling down, that doesn’t require any plug-ins? [duplicate]
  72. Inclution place of CSS file
  73. Blog page and the Home page showing the same content
  74. WP Admin Bar transparent on some pages (.screen-reader-shortcut)
  75. Admin bar default color scheme for nonregistered/nonlogged users
  76. Lines of CSS only being delivered while logged in
  77. How to Compress Css/js code in wordpress and increase loading speed?
  78. How to Take Logo Out of Navigation Menu? [closed]
  79. @media applying globally and not separately for each screen width [closed]
  80. Make different border color gallery items
  81. How remove the white space between my menu and slider?
  82. WordPress site using unknown overriding css
  83. Header formatting works for safari but not chrome @media screen size technique on iphone
  84. Style Switching
  85. Adding a css style to the main nav menu in child pages
  86. Adding custom css to a theme depending on whether the admin user is logged in or not
  87. Adjusting post width according to the image size
  88. Background tiles not working in iPad2 but ok everywhere else
  89. To override CSS of parent theme
  90. Can’t override CSS with child theme
  91. [class*=”content”]:before css styles in TwentyThirteen [closed]
  92. How to change the CSS in one file?
  93. How to use WordPress 3.8 back-end CSS in front-end?
  94. Enqueue MCE Editor CSS in admin page
  95. Narrow paragraph block aligned to left of “wrapper”
  96. Transparent Overlay for Gravity Forms Ajax Spinner
  97. Remove the main title, but only from the main page
  98. aos properties ‘invalid’ and not recognised when included as a css class [closed]
  99. ACF Extended : Disable styles in front [closed]
  100. How to remove automatically added custom style tag?

Leave a Comment