Materialize does not have font-size features
riturajshakti opened this issue · 4 comments
Like the 6 different forms of headings, z-depth, push and pull -
Please add a features for changing the font size of 6 - 10 different forms in materialize way.
I know there is a feature called flow-text, but its size is not customisable. In desktop screens, these text is much larger than actually needed.
There should be 6 - 10 different forms of font-sizes in materialise way.
Please add this feature also, We have to use custom css for changing font-size
You can import your own css. If your using nodes like framework like next or sapper just import it in the _layout file. if more of a SPA import in the app.js
usually as '
import ../fontsizes.css'
css file would like like
.xs {font-size: 0.75rem!important}
.sm {font-size: 0.875rem!important}
.base {font-size: 1rem!important}
.lg {font-size: 1.125rem!important}
.xl {font-size: 1.25rem!important}
.xl2 {font-size: 1.5rem!important}
.xl3 {font-size: 1.875rem!important}
.xl4 {font-size: 2.25rem!important}
.xl5 {font-size: 3rem!important}
.xl6 {font-size: 4rem!important}
.fs1 {font-size: 1vw!important}
.fs2 {font-size: 1.4vw!important}
.fs3 {font-size: 1.6vw!important}
.fs4 {font-size: 1.8vw!important}
.fs5 {font-size: 2vw!important}
.fs6 {font-size: 2.2vw!important}
.fs7 {font-size: 2.4vw!important}
.fs8 {font-size: 2.6vw!important}
Not really en elegant solution is it? Any reason why it is this way?
Not really en elegant solution is it? Any reason why it is this way?
Hey Nomuna, I've just been reviewing this and the implementation of flow-text. Flow-text does appear to be a reasonable solution. Yes there are static sizes defined based on the view port size but they are relative to your body font-size so you could override your html (although I always set mine on body) font-size (in %) then your flow-text size would be adjusted accordingly. The only more elegant solution I can think of is to use a the "vw" or "vh" to scale the text size but when I used this previously it's very subjective what is the correct value to scale. In my instance I was using it on a heading that had to fit about 50% of the screen width which is not the value I would have used on paragraph text. Any opinions on these approaches?
Btw you should jump over to https://github.com/materializecss/materialize (which is the active fork of this project) and raise this there as we are currently assessing items to be included in the next release.