Repository navigation
Implemented M3 Typography letterSpacing for bodyLarge does not match M3 Guide Spec. #102121
Description
Activity
Hi @rydmike, Thanks for filing the issue. I do see 0.5 letter-spacing being used for body large on flutter master
and the M3 Typography Specs seem to indicate it should be 0.15. Labeling this issue as a bug, since this is not aligned with the Material 3 Specs
cc: @rami-a
Reacted by Rydmike- added and removed
on Apr 19, 2022 it makes sense looking at the M3 guide but this needs a tokens update:
flutter/dev/tools/gen_defaults/data/text_style.json
Lines 6 to 8 in fd360c4
Reacted by RydmikeI just checked and the value coming back from the token DB is indeed 0.5. I have asked the design team about this and will follow up with either a fix or a bug against the spec if that needs to be updated.
Reacted by RydmikeI wrote a quick test based on these references
testWidgets('bodyText1 is not equal to bodyLarge', (WidgetTester tester) async { final ThemeData theme = ThemeData(); final Key bodyText1Key = UniqueKey(); final Key bodyLargeKey = UniqueKey(); await tester.pumpWidget( MaterialApp( home: Scaffold( body: Center( child: Text('Dash', key: bodyText1Key, style: theme.textTheme.bodyText1), ), ), ), ); RenderParagraph paragraph = tester.renderObject(find.text('Dash')) as RenderParagraph; // While `text_theme.dart` references `TextStyle? get bodyText1 => bodyLarge;`. // `theme.textTheme.bodyLarge` paragraph size is `const Size(56.0, 14.0)`. expect(paragraph.size, const Size(56.0, 14.0)); await expectLater( find.byKey(bodyText1Key), matchesGoldenFile('bodyText1.png'), ); await tester.pumpWidget( MaterialApp( theme: ThemeData(useMaterial3: true), home: Scaffold( body: Center( child: Text('Dash', key: bodyLargeKey, style: theme.textTheme.bodyLarge), ), ), ), ); await tester.pumpAndSettle(); paragraph = tester.renderObject(find.text('Dash')) as RenderParagraph; // While `text_theme.dart` references `TextStyle? get bodyText1 => bodyLarge;`. // `theme.textTheme.bodyLarge` paragraph size is not equal to `bodyText1`. expect(paragraph.size, const Size(57.0, 20.0)); await expectLater( find.byKey(bodyLargeKey), matchesGoldenFile('bodyLarge.png'), ); });
and recent example where
list_tile_test.dartfont size test fails when updatingbodyText1tobodyLargeinlist_tile.dart, so i resorted tobodyMediumin #101900Maybe the token DB is correct, and thus Flutter too, but in that case the spec shown in web guide is wrong. Both can't be right, was my main point with this observation too 😄 Curious to find out which one it is supposed to be. Perhaps the token DB is correct but web never got updated. I thought it was generated using same token db, but apparently not.
Just heard back from the design team and it is a bug in the spec, which will be fixed in the next major roll out of the site.
The DB is correct with 0.5, so Flutter is using the right value.
Reacted by Rydmike and Mahesh Jamdade@darrenaustin OK thanks, good to know. I will have to update the value I have used then, as I have been using the M3 published guide spec value, but no problem, as long as it is sorted what it should be. Took a surprising long time to get an answer to simple question 😉
I won't even be needed it all once the Typography lands in stable channel. I'm guessing at version released at Google IO.
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on May 16, 2022
Discrepancy: M3 Guide Typescale versus Flutter Typography Implementation
In this #89853 (comment), I made an observation that the spec in supplied image did not match the M3 Web guide concerning the Typescale / Typography for TextStyle
bodyLargeand its usedletterSpacing.The image in (#89853) has
bodyLargeand its usedletterSpacingdefined as 0.5The guide at 0.15
In this PR https://github.com/flutter/flutter/pull/97829/files#diff-a91306c958d84cfa7a9287e538e2c8f22bd7765d59ec1dadb2382bda832332adR751 it was implemented as 0.5, and was merged into master as such:
flutter/packages/flutter/lib/src/material/typography.dart
Line 749 in fd360c4
Question:
Is the M3 guide spec wrong?
Or is it an oversight that the correction observation did not make it into the Flutter implementation?
One or the other needs to be corrected, they can't both be right.
In issue https://github.com/flutter/flutter/issues/89853 @rami-a concluded that the image was wrong and the web M3 spec correct.
Which of course means that the current Flutter implementation is incorrect.
cc: @darrenaustin @TahaTesser